You can even play around with the gain and make the volume play louder than 100%. You can use this function to amplify the sound:
function amplifyMedia(mediaElem, multiplier) {
var context = new (window.AudioContext || window.webkitAudioContext),
result = {
context: context,
source: context.createMediaElementSource(mediaElem),
gain: context.createGain(),
media: mediaElem,
amplify: function(multiplier) { result.gain.gain.value = multiplier; },
getAmpLevel: function() { return result.gain.gain.value; }
};
result.source.connect(result.gain);
result.gain.connect(context.destination);
result.amplify(multiplier);
return result;
}
You could do something like this to set the initial amplification to 100%:
var amp = amplifyMedia(sounds[id], 1);
Then if you need the sound to be twice as loud you could do something like this:
amp.amplify(2);
If you want to half it you can do this:
amp.amplify(0.5);
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/