Volume Booster Extension Project With HTML, CSS, and JavaScript

CodeHemu
volume booster extension project

If you've ever had low volume issues with your browser, you've probably used a volume booster extension. This extension can increase the volume up to 6 times using the Web Audio API.

However, many people believe that the loud volume means better sound quality. That's not actually true. They don't know that increasing the volume over 100% can cause audio crackling.

Hi, I am Subha Naskar. In this guide, you will learn how a volume booster extension increases the volume. In reality, we'll build a complete volume booster extension.

🔊 You can find the code for the volume booster on Github.

Inspiration

Any new web developer can create browser extension. You don't need advanced skills or an expensive PC. I have also created many extensions on my laptop. Those extensions are still popular with many people. So, you can also create extensions.

Prerequisites

You'll need to create the volume booster extension:

  • Code editor installed (like VS Code, Sublime text)
  • Knowledge of JavaScript: variables, function, and Web Audio API
  • Browser settings: turning on developer mode and loading extension
Anyone interested in software development should first try creating a browser extension.

Table of Contents


What is Web Audio API and Why should you know?

The Web Audio API is like a simple DJ controller inside the browser. It allows developers to create, modify, and analyze audio. You can think of the Web Audio API as a small audio processing system. Developers use the Web Audio API to create audio tracks, volume control, EQ, and filter effects.

But we'll only focus on increasing the volume. The AudioContext is used to run the Web Audio API.

const audioContext = new AudioContext();
new audio context

AudioContext is the core of the engine. It allows you to load sounds, process audio, and control the volume.

How is the Web Audio API structured?

The structure of the Web Audio API is the same across all browsers.

Web Audio API Structure

You don't need to know all the objects to create a volume booster. Just need to understand the audio source, processing nodes, and the destination.

audio sources

First, you need to see where the audio is coming from. That means, what is the source of the audio? The source of audio can be of many types within the browser. For example, when audio comes from an HTML <audio> or <video> element, you use a MediaElementAudioSourceNode.

<audio src="codehemu-audiofile.mp3"></audio>

const audio = document.querySelector("audio");
const source = audioContext.createMediaElementSource(audio);

Similarly, when audio comes from a microphone or a live stream, then the MediaStreamAudioSourceNode is used.

// Audio source is microphone. Request microphone access
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const source = audioContext.createMediaStreamSource(stream);

// If the microphone is unavailable, the browser will throw a 
// NotFoundError: Requested device not found.

Audio source objects tell the AudioContext engine where the audio comes from. These objects do not modify or process the audio. Processing nodes are used to apply gain, filtering, analysis, and other audio effects. In the final step, the audio context sends the processed audio to the output destination.

Top 4 DJ Workflow Examples

Here, we'll share 5 JavaScript snippets for DJ workflows using the Web Audio API.

  1. Volume Booster 3X (GainNode)
// AudioSource → GainNode (gain = 3.0) → Destination
const audioContext = new AudioContext();
const media = document.querySelectorAll("audio, video")[0];
const source = audioContext.createMediaElementSource(media);

const gainNode = audioContext.createGain();
gainNode.gain.value = 3.0; // Volume 3x increase

source.connect(gainNode);
gainNode.connect(audioContext.destination);

This code above boosts the volume by 3 times, but the audio source must be a media element (<video>). For example, this JavaScript code will make YouTube or Facebook videos 3X louder. But, platforms like Netflix or Prime Video block access to media elements, so this code will not work in those platforms.

Note: boosting may cause clipping. Do not increase the volume up to 3x unnecessarily, as it may damage your speakers.
  1. Bass Booster (BiquadFilter)
// AudioSource → BiquadFilter (EQ) → Destination
const filter = audioContext.createBiquadFilter();
filter.type = "lowshelf";
filter.frequency.value = 200;
filter.gain.value = 6; // +6 dB bass boost

source.connect(filter).connect(audioContext.destination);

Bass usually ranges from 20 to 250 Hz (frequencies), which can make vibrations in your chest when played at high volume. Since bass frequencies extend up to 250 Hz, this code boosts frequencies below 200 Hz by 6 dB in audio or video elements. As a result, audio and video will have stronger bass.

  1. Delay FX Signal Flow (Echo / Delay)
// AudioSource → Delay FX → Destination
const delay = audioContext.createDelay(5.0);
delay.delayTime.value = 0.25; // 250ms echo

const feedback = audioContext.createGain();
feedback.gain.value = 0.4;

const wet = audioContext.createGain();
wet.gain.value = 0.5;

delay.connect(feedback).connect(delay);
source.connect(delay);
delay.connect(wet).connect(audioContext.destination);
source.connect(audioContext.destination);

This snippet adds a 250 millisecond delay (echo) to an audio or video element. It feeds part of the delayed signal back into itself at 4o% feedback to create repeating echoes. Then mixes the echo at 50% volume with the original sound. As a result, the audio plays normally but with a repeating echo effect.

  1. Sound Level Meter (AnalyserNode)
// AudioSource → AnalyserNode → Console
const analyser = audioContext.createAnalyser();
analyser.fftSize = 256;

source.connect(analyser);
analyser.connect(audioContext.destination);

const dataArray = new Uint8Array(analyser.frequencyBinCount);

setInterval(()=>{
  analyser.getByteFrequencyData(dataArray);

  const bass = dataArray.slice(0, 10);
  const mid  = dataArray.slice(10, 40);
  const high = dataArray.slice(40);

  const avg = arr => arr.reduce((sum, v) => sum + v, 0) / arr.length;
  const scale = v => Math.min(15, Math.floor(v / 16)); // 0–16 LEDs

  console.log("█".repeat(scale(avg(bass))));
  console.log("█".repeat(scale(avg(mid))));
  console.log("█".repeat(scale(avg(high))));
}, 500);

Output:

Analyser nodeWith this snippet, you will see a live audio visualization in the console displaying bass, mid, and high frequencies.

What is the Folder Structure of Your Volume Booster?

Let's create the volume booster extension. First, create a folder and name it volume-booster-codehemu. Then create manifest.json, popup.html, and popup.js files inside that folder.

Folder Structure: 
volume-booster-codehemu/
├── manifest.json
├── popup.html
└── popup.js
  • manifest.json: Defines extension metadata and permissions.
  • popup.html: User interface for input slider.
  • popup.js: Main script for volume boosting on web pages.

Manifest Configuration of the Volume Booster

The manifest.json file is the skeleton of our extension, which tells the browser where what files are located and what permissions are required.

{
  "manifest_version": 3,
  "name": "Volume Booster - CodeHemu",
  "version": "1.0",
  "description": "Boost tab audio up to 300%",
  "permissions": ["activeTab", "tabCapture", "tabs"],
  "host_permissions": ["<all_urls>"],
  "action": {
    "default_popup": "popup.html"
  }
}

This setup gives tab access and tab capture permission.

Build popup.html with a input slider for intuitive control.

<!DOCTYPE html>
<html>
<body>
    <label for="volume">Boost Level: <span id="level">200%</span></label>
    <input type="range" id="volume" min="100" max="300" value="200">
    <script src="popup.js"></script>
</body>
</html>

This creates a popup that is designed for quick access.

Implement popup.js to detect and boost active tabs using the Web Audio API.

const API = chrome || browser;
var gainNode = null;

const mediaSource = (id) => {
 return new Promise((resolve, reject) => {
  resolve(navigator.mediaDevices.getUserMedia({
    video: false,
    audio: { mandatory: {
      chromeMediaSource: "tab",chromeMediaSourceId: id}}
   }));
 })
};

document.addEventListener('DOMContentLoaded', async () => {
 const slider = document.getElementById('volume');
 const level = document.getElementById('level');

 const consumerId = (await API.tabs.getCurrent())?.id;
 const [tab] = await chrome.tabs.query({ 
   active: true, 
   currentWindow: true 
 });

 API.tabCapture.getMediaStreamId({
   consumerTabId: consumerId,
   targetTabId: tab.id
 }, async (streamId) => {
   if (!API.runtime.lastError) {
     const stream = await mediaSource(streamId);
     if (!API.runtime.lastError) {
       const audioCtx = new AudioContext();
       const source = audioCtx.createMediaStreamSource(stream);
       gainNode = audioCtx.createGain();
       source.connect(gainNode);
       gainNode.connect(audioCtx.destination);
     }
   }
 });

 slider.oninput = () => {
   level.textContent = slider.value + '%';
   if (gainNode) gainNode.gain.value = slider.value / 100;
 }
});

It passes media source through a GainNode to safely increase the volume up to three times.

Load and Test Your Volume Booster:
  1. Open your browser extensions tab (e.g. chrome://extensions/)
  2. If "Developer mode" is disabled, enable it.
  3. Click "Load unpacked" and select your volume-booster-codehemu folder.

Conclusion

You have built a working Volume Booster Chrome extension that shows how to use Web Audio API techniques. This project also shows Manifest V3, popup script tab capture, and real-time audio processing.

Our success:
  • This extension uses GainNode objects to increase volume safely by 100-300%.
  • Perfect example for tabCapture, stream ID, and Web audio API.

Thanks for reading this article about creating the browser extension. If you have any difficulty creating the extension, please let us know via comment or connect.

Happy Browser Extension Development!

Post a Comment

2 Comments