Boost YouTube's Volume Beyond 100% (without an extension)
Tags: javascript, webdev
Published: 2020-12-25 02:01:15

We've all seen those videos with sound in negative decibels. Sometimes even external-speakers are not enough. (i.e.: 100% YT, 100% PC, 100% Speakers, is still not enough)

There are browser-extensions out there that can help you with it, but personally, I have trust issues with extensions, so I only use 2 or 3 of the very popular ones, and even those are allowed to only run **OnClick**.

We still need an extension like functionality without an extension. And that's exactly what Bookmarklets are for.

> Bookmarklets are nothing but special browser-bookmarks that contain JavaScript code instead of a URL, which get executed on click.

Let's create a Bookmarklet for our VolumeBooster™.

### Step #1

The code to boost the volume of YouTube video player.
```ts
function Boost() {
    if(!window.boosterGainNode) {
        const video = document.querySelector('video');
        const audioCtx = new AudioContext();
        const mediaSource = audioCtx.createMediaElementSource(video);
        const gainNode = audioCtx.createGain();
        mediaSource.connect(gainNode);
        gainNode.connect(audioCtx.destination);
        window.boosterGainNode = gainNode;
    }
    window.boosterGainNode.gain.value = parseFloat(prompt('Enter Boost Level. eg: 3 (enter 1 to reset)')) ?? 1;
}
```

### Step #2

Minify the code, and make it an IIFE, so that it executes on click.

```ts
(function() { if(!window.boosterGainNode) { const video = document.querySelector('video'); const audioCtx = new AudioContext(); const mediaSource = audioCtx.createMediaElementSource(video); const gainNode = audioCtx.createGain(); mediaSource.connect(gainNode); gainNode.connect(audioCtx.destination); window.boosterGainNode = gainNode; } window.boosterGainNode.gain.value = parseFloat(prompt('Enter Boost Level. eg: 3 (enter 1 to reset)')) ?? 1; })();
```

### Step #3

Append `javascript:` to the minified IIFE, and voila we've got a Bookmarklet.

```ts
javascript:(function() { if(!window.boosterGainNode) { const video = document.querySelector('video'); const audioCtx = new AudioContext(); const mediaSource = audioCtx.createMediaElementSource(video); const gainNode = audioCtx.createGain(); mediaSource.connect(gainNode); gainNode.connect(audioCtx.destination); window.boosterGainNode = gainNode; } window.boosterGainNode.gain.value = parseFloat(prompt('Enter Boost Level. eg: 3 (enter 1 to reset)')) ?? 1; })();
```

### Step #4
Go to your browser's bookmarks/favorites manager, and create a new bookmark.

- In the "name" field fill a name like **VolumeBooster**.
- In the "URL" field paste the bookmarklet code. (from step #3)

### Step #5
Make sure that the browser didn't remove `javascript:` from the URL/code. Add it back if it got removed. Save the bookmark.

### Step #6 Profit 💹

- Play any YouTube video. (the ones that have a really low sound)
- Click on the **VolumeBooster** bookmark.
- Put in a boost level number (e.g.: 2, 3, 4) in the prompt and hit enter.

`0` means mute.
`1` means normal. (default level)
You can also put float values.

---

Source: https://stackoverflow.com/a/43794379

This booster can be used on any website that uses a `video` Element for videos.

---

Merry Christmas and Happy New Year 🎉🎄🎅