CODEWITHSUNDEEP
javascripthtml
Justin Jung
Justin Jung

Reputation: 563

HTML5 Volume Increase Past 100%

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]??

Upvotes: 38

Views: 20669

Answers (1)

Soviut
Soviut

Reputation: 91555

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.

Upvotes: 83

Related Questions