Cómo obtener FFT de la etiqueta de audio en HTML5

Question

Quiero obtener los datos de FFT de una etiqueta <audio>, pero no funciona sin ningún error de sintaxis. Mira en el documento de la API de Web Audio, escribo un código de ejemplo, aquí está mi código:

<audio id="aud" controls="controls" src="test.mp3"></audio> 

<script type="text/javascript"> 
var audioElement = document.getElementById("aud"); 
var audioContext = new webkitAudioContext(); 
var streamingAudioSource = audioContext.createMediaElementSource(audioElement); 
var jsProcessor = audioContext.createJavaScriptNode(4096,1,1); 
jsProcessor.onaudioprocess = process; 
var analyser = audioContext.createAnalyser(); 
analyser.fftSize = 2048; 

//streaming:AudioSource->jsProcessor->analyser->destination 
streamingAudioSource.connect(jsProcessor); 
jsProcessor.connect(analyser); 
analyser.connect(audioContext.destination); 
//autoplay 
audioElement.play(); 
function process(event){ 
    var freqByteData = new Uint8Array(analyser.frequencyBinCount); 
    analyser.getByteFrequencyData(freqByteData); 
    document.getElementById("info").innerHTML=freqByteData[1];//show data in div 
} 
</script> 

versión Mi Chrome es 20.0.1096.1 Dev-m y creo que funciona bien. A través de proceso(), estoy tratando de escribir freqByteData, pero muestra 0, y todos ellos son siempre 0. Debe tener algo mal de mi código, y quiero saber cómo obtener datos de frecuencia de un audio etiqueta.

Answer 1

Parece que createMediaSourceElement se rompe si se llama antes de window.onload. Hay un informe de fallos sobre este tema: http://code.google.com/p/chromium/issues/detail?id=112368

Actualmente existen dos soluciones:

espere el evento de carga de la ventana antes de ejecutar todo el javascript

window.addEventListener('load', function(){ 
    // your code 
}, false); 

o

Crear MediaElementSource en un setTimeout con 0 retraso

setTimeout(function(){ 
    var streamingAudioSource = audioContext.createMediaElementSource(audioElement); 
    var jsProcessor = audioContext.createJavaScriptNode(4096,1,1); 
    // The rest of the code 
}, 0);