Web audio Api

[jonni09lo]

Si revisas este código:

Código Javascript:

var gradient = ctx.createLinearGradient(0,0,0,300);
gradient.addColorStop(1,'#000000');
gradient.addColorStop(0.75,'#ff0000');
gradient.addColorStop(0.25,'#ffff00');
gradient.addColorStop(0,'#ffffff');
 
// when the javascript node is called
// we use information from the analyzer node
// to draw the volume
javascriptNode.onaudioprocess = function() {
 
    // get the average for the first channel
    var array =  new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(array);
 
    // clear the current state
    ctx.clearRect(0, 0, 1000, 325);
 
    // set the fill style
    ctx.fillStyle=gradient;
    drawSpectrum(array);
 
}
function drawSpectrum(array) {
for ( var i = 0; i < (array.length); i++ ){
        var value = array[i];
        ctx.fillRect(i*5,325-value,3,325);
    }
};
 

Notarás que lo que se usa para dibujar el espectro es el array generado por new Uint8Array(analyser.frequencyBinCount) y si revisas la función drawSpectrum verás de que es el encargado de dibujar las lineas.

Saludos