HTML5 Volume Increase Past 100%

Question

This has been posted a few years back, but has still gone unresolved. I'm determined to make something that plays the video at a volume let's say 150%, but HTML5 volume method has an error with any value greater then 1. https://www.w3schools.com/tags/av_prop_volume.asp

Here's my code:

javascript:(function(){document.getElementsByTagName('video')[0].volume = 1.5;}()); 

0.5 works but not 1.5. One answer said that it gives this error:

Uncaught DOMException: Failed to set the 'volume' property on 'HTMLMediaElement': The volume provided (2) is outside the range [0, 1]. 

Anyway I can do something with this exception to have it run beyond the range [0,1]??

Answer 1

The video volume is a percentage between 0 and 1, it can't got higher than 100%.

The only way you could potentially make this happen is be routing the audio from the video player into the Web Audio API and amplifying it there.

https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource

// create an audio context and hook up the video element as the source var audioCtx = new AudioContext(); var source = audioCtx.createMediaElementSource(myVideoElement);  // create a gain node var gainNode = audioCtx.createGain(); gainNode.gain.value = 2; // double the volume source.connect(gainNode);  // connect the gain node to an output destination gainNode.connect(audioCtx.destination); 

You can take that audio context from the video and run it through a gain node to boost the audio volume or apply audio effects like reverb. Careful not to increase the gain on the gain node too much or audio that's already been mastered will start clipping.

Finally, you need to connect the gain node to an audio destination so that it can output the new audio.