Instantly share code, notes, and snippets.

Embed
What would you like to do?
Prototype to easily set the volume (actual and perceived), loudness, decibels, and gain value of <audio> tags and <video> tags.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example Page</title>
<script src="MediaElementAmplifier.js"></script>
<script type="text/JavaScript">
document.addEventListener("DOMContentLoaded", function(event) {
var amp = new MediaElementAmplifier(document.getElementById('testVideo'));
amp.setLoudness(2); // Sets the video to be twice as loud as normal
});
</script>
</head>
<body>
<h1>Example Page</h1>
<video id="testVideo" src="example.mp4" autoplay poster="posterimage.jpg">
Your browser does not support embedded videos. You can alternatively
<a href="example.mp4">download it</a> and watch it.
</video>
</body>
</html>
/**
* @license Copyright 2017 - Chris West - MIT Licensed
* Prototype to easily set the volume (actual and perceived), loudness,
* decibels, and gain value.
*/
function MediaElementAmplifier(mediaElem) {
this._context = new (window.AudioContext || window.webkitAudioContext);
this._source = this._context.createMediaElementSource(this._element = mediaElem);
this._source.connect(this._gain = this._context.createGain());
this._gain.connect(this._context.destination);
}
[
'getContext',
'getSource',
'getGain',
'getElement',
[
'getVolume',
function(opt_getPerceived) {
return (opt_getPerceived ? this.getLoudness() : 1) * this._element.volume;
}
],
[
'setVolume',
function(value, opt_setPerceived) {
var volume = value / (opt_setPerceived ? this.getLoudness() : 1);
if (volume > 1) {
this.setLoudness(this.getLoudness() * volume);
volume = 1;
}
this._element.volume = volume;
}
],
[ 'getGainValue', function() { return this._gain.gain.value; } ],
[ 'setGainValue', function(value) { this._gain.gain.value = value; } ],
[ 'getDecibels', function() { return 20 * Math.log10(this.getGainValue()); } ],
[ 'setDecibels', function(value) { this.setGainValue(Math.pow(10, value / 20)); } ],
[ 'getLoudness', function() { return Math.pow(2, this.getDecibels() / 10); } ],
[ 'setLoudness', function(value) { this.setDecibels(10 * Math.log2(value)); } ]
].forEach(function(name, fn) {
if ('string' == typeof name) {
fn = function() { return this[name.replace('get', '').toLowerCase()]; };
}
else {
fn = name[1];
name = name[0];
}
MediaElementAmplifier.prototype[name] = fn;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment