Volume Booster Extension Project With HTML, CSS, and JavaScript

CodeHemu
volume booster extension project

If you've ever faced the problem of low sound while watching YouTube videos or attending online classes, you've probably used a browser extension like Volume Booster. These types of extensions can amplify the audio signal up to 6x by using the Web Audio API. However, many people have a belief that additional volume means better sound quality. But that's not actually the case. Increasing the browser's volume over 100% can cause audio crackling and bass distortion.

Hi, I am Subha Naskar. Since 2018, I have created 100+ browser extensions. In this guide, you will learn how a volume booster extension increases the volume in the browser. In reality we'll build one together a boosting browser extension.

🔊 You can find the code for the Volume Booster extension on Github.

Are you ready to create the extension?

Any new web developer can create a browser extension, only needing a computer or laptop. You don't need to be a pro-level skills or have a high-speed computer to create an extension. I have also created many browser extensions using my home computer, and those extensions are still loved by many people.

You'll need to create and test the Volume Booster extension:

  • Code editor installed (like VS Code, Sublime text)
  • Basic knowledge of HTML CSS JavaScript: variables, function, data types and Web Audio API
  • Browser settings: turning on developer mode and loading extension packages
If you are interested in Android or software development, I suggest starting by building 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's a low-level audio processing system that allows developers to create, modify, and analyze audio. Using this API, you can create a small DJ mixer tool inside the browser with features like multiple audio tracks, volume control, EQ, filters, effects, and more.

But today we are building a volume booster, not a DJ mixer. So instead of discussing the other features of this API, we'll focus only on volume boost or gain control.

The AudioContext is used to run the Web Audio API engine in the browser. It manages audio processing and timing.

const audioContext = new AudioContext();
new audio contextAudioContext is running in Chrome's Developer Console.

This context is the core of the Web Audio API. It allows you to load sounds, process audio, control volume, and perform many other audio operations.

What is the Official Structure of the Web Audio API in 2026?

Currently, almost every browser has a web audio API built-in, and the API structure of each browser is almost the same.

Web Audio API
│
└── AudioContext
     │
     ├── Audio Sources
     │     ├── MediaElementAudioSourceNode
     │     ├── MediaStreamAudioSourceNode
     │     ├── BufferSourceNode
     │     └── OscillatorNode
     │
     ├── Audio Processing Nodes
     │     ├── GainNode
     │     ├── BiquadFilterNode
     │     ├── DelayNode
     │     ├── StereoPannerNode
     │     ├── DynamicsCompressorNode
     │     ├── WaveShaperNode
     │     └── ChannelMergerNode / ChannelSplitterNode
     │
     ├── Analysis and Control
     │     ├── AnalyserNode
     │     ├── AudioParam
     │     └── AudioListener
     │
     ├── Effects
     │     ├── ConvolverNode (reverb)
     │     └── IIRFilterNode
     │
     ├── Destinations
     │     ├── AudioDestinationNode (speakers)
     │     └── MediaStreamDestinationNode
     │
     └── Timing System
           ├── currentTime
           ├── rate
           └── scheduling

Discussing all the objects in the audio context would make the article much longer. So, we'll focus only on the objects needed to boost volume, such as the audio source, processing nodes, and the destination. It's possible to create a volume booster extension using these three types of objects.

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

0 Comments