DEV Community

loading...
Cover image for Boost YouTube's Volume Beyond 100% (without an extension)

Boost YouTube's Volume Beyond 100% (without an extension)

dabalyan profile image Ankit Singh Updated on ・2 min read

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.

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;
}
Enter fullscreen mode Exit fullscreen mode

Step #2

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

(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; })();
Enter fullscreen mode Exit fullscreen mode

Step #3

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

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; })();
Enter fullscreen mode Exit fullscreen mode

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 🎉🎄🎅

Discussion (7)

pic
Editor guide
Collapse
lukeshiru profile image
▲ LUKE知る

Nice one! I made it a little shorter for the bookmarklet:

javascript:((v,a=new AudioContext(),g=a.createGain())=>(window._g??(c=>(a.createMediaElementSource(document.querySelector('video'))[c](g),g[c](a.destination),window._g=g))("connect")).gain.value=v??1)(parseFloat(prompt("Enter gain level (1-3)",window._g?.gain.value)));
Enter fullscreen mode Exit fullscreen mode

Basically I moved some stuff around to avoid the need of if, and also if you already set the gain value, you get that as the default value of the prompt :D

Collapse
prashanthr profile image
Collapse
heb profile image
Ihab Heb

Amazing tweak , working on Chrome but when I tried on Edge(Chromium) , the prompt doesn't show up, my settings of the two browsers are nearly similar. 😕

Collapse
dabalyan profile image
Ankit Singh Author

That's weird, I have the same browser version 87.0.664.66, and it seems to be working fine. Maybe prompts are blocked/disabled somehow, but tbh I've no idea 😑

Collapse
heb profile image
Ihab Heb

Weird Indeed ! running it as a snippet until i find a way to make this bookmarklet work on Edge Beta version 88.0.705.29 . Thank you , really appreciate it ! 🙏🏻

Collapse
sagarmaharjan profile image
Geek Sagar

love it <3 <3

Collapse
devworkssimone profile image
DevWorksSimone

Very helpfull ! Was wondering if there was a way to raise audio of some low audio video on yt!