Create a audio meter with web audio API and HTML5 canvas

Sriram

This was very useful. Thank you.

Luis Javier

Hey! Great!

i was looking the code,

I have some questions about how you calculate the dB flloor to get the dB relative values?
db = 20*Math.log(Math.max(max,Math.pow(10,-72/20)))/Math.LN10;

can you help me with this? ¿any hiperlink or reference?

Luis Javier

I like this!

But i’ve found a little error, the yellow stop on gradient does not match with -6dB i’s about -24dB!!

Licson

@LuisJaVier That formula actually comes from dsp.js. I shortened its code for calculating the dB floor and applied here.

About the yellow gradient, I’m sorry for that. I’m still figuring out how to move it to the correct place.

Gregor

This is an incredibly bad example to teach people with. Let me explain.

1. You create a gradient EACH TIME onaudioprocess is called. This is a huge performance hit and needlessly stirs up the memory manager/garbage collecor in the JS engine.

2. You should be using an analyserNode not a scriptProcess. The analyser node is native code and doesn’t generate callbacks. You can access the data in the analyser node from an animationFrame callback.