How to set the loudness of HTML5 audio?

By | February 22, 2018
Questions:

In an HTML5 game I’m making, I play a “thud” sound when things collide. However, it is a bit unrealistic. No matter the velocity of the objects, they will always make the same, relatively loud “thud” sound. What I’d like to do is to have that sound’s loudness depend on velocity, but how do I do that? I only know how to play a sound.

playSound = function(id)
{
    sounds[id].play();
}

sounds is an array full of new Audio("url")‘s.

Answers:

Use the audio element’s volume property. From W3:

The element’s effective media volume is volume, interpreted relative
to the range 0.0 to 1.0, with 0.0 being silent, and 1.0 being the
loudest setting, values in between increasing in loudness. The range
need not be linear. The loudest setting may be lower than the system’s
loudest possible setting; for example the user could have set a
maximum volume.

Ex: sounds[id].volume=.5;

Questions:
Answers:

You can adjust the volume by setting:

setVolume = function(id,vol) {
    sounds[id].volume = vol; // vol between 0 and 1
}

However, bear in mind that there is a small delay between the volume being set, and it taking effect. You may hear the sound start to play at the previous volume, then jump to the new one.

Questions:
Answers:

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/

Leave a Reply

Your email address will not be published. Required fields are marked *