I know that getByteFrequencyData returns the volume in dB of each frequency band. How do I determine the total volume in dB of the signal to show in a VU meter?

Most of the time I see code that simply adds the volume of each frequency band and then devides the sum by the number of bands but this for sure is not correct. It would mean that EVERY frequency band would need to be at 6 dB for the whole signal to have 6 dB. That, of course, is not the case.

My questions:

1. How can I determine the total volume of the signal correctly?

2. If minDecibelsis set to -96 and maxDecibels to 0, I assume that a value of 0 translates to -96 dB and a value of 255 to 0 db. But: What would a value of 128 mean? -48 dB?

I know that getByteFrequencyData returns the volume in dB of each frequency band. How do I determine the total volume in dB of the signal to show in a VU meter?

Most of the time I see code that simply adds the volume of each frequency band and then devides the sum by the number of bands but this for sure is not correct. It would mean that EVERY frequency band would need to be at 6 dB for the whole signal to have 6 dB. That, of course, is not the case.

My questions:

1. How can I determine the total volume of the signal correctly?

2. If minDecibelsis set to -96 and maxDecibels to 0, I assume that a value of 0 translates to -96 dB and a value of 255 to 0 db. But: What would a value of 128 mean? -48 dB?

• javascript
• web-audio-api

3 Answers 3

1. I think this depends on what you mean by "volume". If it's the energy of the signal, then you can just take the average of the output from getFloatFrequencyData, but the average should not average the dB values. You need to convert to linear before doing the average. This is expensive; you could just take the time domain data and pute the average sum of squares and get the same answer (almost).
2. Yes, the FFT data is converted to dB and then linearly mapped between the min and max values. See https://webaudio.github.io/web-audio-api/#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array.

I found @tom-hazledine's approach of Math.max to generate too loud of a spectrum, effectively maxing out the volume meter very quickly.

Here's another approach that simply takes the average, and it can be modified easily to adjust if still too loud:

var array = new Uint8Array( buffer_size );

listenerNode.onaudioprocess = function(){

    // Get the audio data and store it in our array.
    volume_analyser.getByteFrequencyData( array );

    // Get the peak frequency value.
    var peak_frequency = array.reduce((a, b) => a + b, 0) / array.length;

    // ...
}

To reduce the average even further, simply add to the length of the array (ie. array.length + 100)

Or for a more proper mathematical way to do this, but it also creates too loud of a signal, is:

var array = new Uint8Array( buffer_size );

listenerNode.onaudioprocess = function(){

    // Get the audio data and store it in our array.
    volume_analyser.getByteFrequencyData( array );

    // Get the peak frequency value.
    let sum = 0
    for (const amplitude of array) {
      sum += amplitude * amplitude
    }

    const volume = Math.sqrt(sum / array.length)
}

This can also be adjusted by adding to the array length as described above.

I've been wrestling with this issue too - the results from an average of the getByteFrequencyData output just doesn't look right.

A simplistic solution would be to return just the peak value from the frequency data.

var array = new Uint8Array( buffer_size );

listenerNode.onaudioprocess = function(){

    // Get the audio data and store it in our array.
    volume_analyser.getByteFrequencyData( array );

    // Get the peak frequency value.
    var peak_frequency = Math.max.apply( null, array );

    // ...
}

This produces results that look normal on a VU meter display.