Did you know that thanks to the Web Audio API it is possible to boost the volume up PAST 100% on <audio>
tags & <video>
tags? I wrote the following function to do just that:
The above JavaScript function gives us the ability to amplify (or boost) the volume of a media element well above the normal maximum of 100%. By simply specifying a reference to the element and a multiplier for the volume we can increase or decrease the maximum volume of audio and video tags. Here is an example page’s code using the function:
Parameters
The above function takes two parameters:
- mediaElem
Either an<audio>
tag or a<video>
tag for which the volume will be amplified or boosted. - multiplier
A number which will basically represent by how much the volume will be multiplied. Passing in1
will simply keep the volume at a normal level. Passing in a number greater than1
will make the volume be greater than normal and passing in a number less than1
will make the volume be less than normal.
Return
The function will return an object containing all of the following:
- context
An instance ofAudioContext
which was used to change the media’s volume. - source
A media source created from theAudioContext
instance and themediaElem
. This may be useful if you desire to do more with the web audio API regarding this media. NOTE: Only one source node can be created from an element. - gain
A media gain created from theAudioContext
instance and themediaElem
. This may be useful if you desire to do more with the web audio API regarding this media. - media
A reference to themediaElem
passed into the function. - amplify
A function which accepts one parameter indicating a newmultiplier
(amplification level). - getAmpLevel
A function which returns themultiplier
(amplification level).
Final Notes
You can only execute this function on any given media element once. Any subsequent attempts will throw an error due to the fact that only one source node can correspond to a media element.
Feel free to use the code and modify the code as you please. I originally got the idea for this code from the following two pages:
Happy coding! š
3 Comments
zamboni · June 21, 2019 at 4:34 AM
dice – 1 = 7?
Web Audio API – Controlling Audio/Video Loudness – Chris West's Blog · August 22, 2017 at 6:10 AM
[…] my previous post about getting more volume with the Web Audio API , I decided to look into controlling the loudness of audio tags and video tags in a more […]
How to set the loudness of HTML5 audio? - QuestionFocus · February 22, 2018 at 3:57 AM
[…] A full write up of the function is found here: http://cwestblog.com/2017/08/17/html5-getting-more-volume-from-the-web-audio-api/ […]