Jak uzyskać FFT z tagu audio w HTML5

Question

Chcę uzyskać dane FFT z tagu <audio>, ale to nie działa bez błędu składni. Patrząc na dokumencie API Web Audio napisać przykładowy kod, tutaj jest mój kod:

<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> 

wersja My Chrome jest 20.0.1096.1 dev-m i myślę, że działa dobrze. Przez process(), próbuję zapisać freqByteData, ale pokazuje 0, a wszystkie z nich są zawsze 0. To musi mieć coś nie tak z mojego kodu, i chcę wiedzieć, jak uzyskać dane częstotliwości z audio etykietka.

Answer 1

Wygląda na to, że createMediaSourceElement zepsuje się, jeśli zostanie wywołane przed window.onload. Jest raport o błędzie o numerze: http://code.google.com/p/chromium/issues/detail?id=112368

Obecnie istnieją dwa obejścia:

Wait zdarzenie obciążenia okno przed wykonaniem całego JavaScript

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

lub

Tworzenie MediaElementSource w setTimeout z 0 opóźnieniem

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