HTML5 Volume Increase Past 100%

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 (window.AudioContext || window.webkitAudioContext)();
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.

Leave a Comment

tech