[SOLUCIONADO] Web audio Api

[Pereirav]

Hola, estoy desarrollando una aplicación que utiliza los datos o "metadatos" (no sabria muy bien como llamarlos) de un audio en concreto, utilizo un "AnalizerNode" del Web Audio Api [URL="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AnalyserNode-section"]https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AnalyserNode-section[/URL], algo así como los datos que utiliza un visualizador gráfico como este:



El caso es que aún consiguiendo "crear" un visualizador personalizado, no consigo extraer los datos que generan ese gráfico para hacer otro tipo de cosas.

Llevo mucho tiempo investigando y no se como extraerlos, o a lo mejor no se donde buscar, aunque con la API no he podido sacar lo que necesito.

Un saludo y gracias adelantadas.

[jonni09lo]

Mira este artículo, es bastante útil.

PD: Como adicional, debes debes de tener en cuenta de que la API de Audio es muy poco soportada actualmente.

Saludos

[Pereirav]

Gracias por responder tan rapido, jonni09lo!!

Con ese artículo ya he estado experimentando y no pude sacar ninguna conclusión, es decir, no se de donde podría extraer los datos que necesito... ¿Quizas del "buffer source node"? ¿O estan alojados en el Array analyser.getByteFrequencyData(array)? No consigo verlo, se que está ahi, pero no puedo verlo... He de decir que no tengo mucha experiencia con javascript...

Muchas gracias!!

[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

[Pereirav]

Muchas gracias de nuevo, jonni09lo, voy a partir de la información que me aclaras a ver que consigo sacar. Me has abierto los ojos!!

[jonni09lo]

No está de más decir que el código anterior no funcionará por si mismo ya que falta declarar javascriptNode. Solo extraje la parte importante

Saludos

[Pereirav]

Ahám... y que es lo que hace exactamente "javascriptNode"?

En el código que estoy yo utilizando no lo introduzco, y creo igualmente un gráfico...

[jonni09lo]

Creo que debes de revisar bien el artículo que te mostré, allí se explica todo eso

En síntesis createJavaScriptNode, permite poder procesar el raw del audio con Javascript.

Saludos