Question

64

How to get microphone input volume value with web audio api?

rated 0 times [ 71] [ 7] / answers: 1 / hits: 24820 / 11 Years ago, tue, january 21, 2014, 12:00:00

I am using the microphone input with web audio api and need to get the volume value.

Right now I have already got the microphone to work:
http://updates.html5rocks.com/2012/09/Live-Web-Audio-Input-Enabled

Also, i know there's a method manipulating the volume of audio file:
http://www.html5rocks.com/en/tutorials/webaudio/intro/

    // Create a gain node.

    var gainNode = context.createGain();

    // Connect the source to the gain node.

    source.connect(gainNode);

    // Connect the gain node to the destination.

    gainNode.connect(context.destination);

   // Reduce the volume.

   gainNode.gain.value = 0.5;

But how to combine these two and get the input volume value?
I just need to the value, no need to manipulate it.

Does anybody know?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cody

Add To Favorites

Follow

Total Points: 679

Total Questions: 111

Total Answers: 111

Location: Czech Republic

Member since Thu, Aug 11, 2022

2 Years ago

answered 11 Years ago pranavrorys · Accepted Answer

There are two main reasons to want to get the volume:

detect when the source clips - i.e. the absolute value of the signal goes over a preset level, usually very near 1.0, where it will start clipping.

give the user a feel for how loud their signal is.

The reason I list these separately is because the first requires that you process every sample - because you might miss a short transient otherwise. For this, you'll need to use a ScriptProcessor node, and you'll have to iterate through every sample in the buffer inside onaudioprocess to look for absolute values above your clip level. You could just determine the RMS level then, too - just sum the squares of each sample, divide by N and take the square root. DO NOT render from within onaudioprocess, though - set values that you access on requestAnimationFrame.

You can also use an AnalyserNode to do the level detection, and just average out the data, kind of like what the other answer does with getAverageVolume. However, the other answer is NOT a good use of ScriptProcessor - in fact, it's doing no processing of the script node at all, not even passing the data through, it's just using it like a timer callback. You would be FAR better served by using requestAnimationFrame as the visual callback; don't ever set layout or visual parameters from inside onaudioprocess like this, or you're begging to thrash your audio system. If you don't need clip detection, just do the getByteFrequencyCount/getAverageVolumefrom above on an AnalyserNode (but you should minimize the number of bands in the Analyser - 64 is the minimum, I think), and you should pre-allocate and reuse a Uint8Array rather than allocating it each time (that will amp up the garbage collection).