2012-04-13 7 views
8

<audio>タグからFFTデータを取得したいが、構文エラーなしでは動作しない。ウェブオーディオAPIドキュメントを見て、私はここで、サンプルコードを書く私のコードは次のとおりです。HTML5のオーディオタグからFFTを取得する方法

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

マイChromeバージョンは20.0.1096.1 DEV-Mであり、私はそれがうまく機能だと思います。 process()を通じて、私はfreqByteDataを書き留めようとしていますが、0を示し、それらはすべて常に0です。 私のコードに間違いがあります。私はオーディオから周波数データを取得する方法を知りたいタグ。

答えて

2

window.onloadより前に呼び出された場合、createMediaSourceElementが壊れているようです。

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

または

を作成し、全体のJavaScriptを実行する前に、ウィンドウのloadイベントを待機します:http://code.google.com/p/chromium/issues/detail?id=112368

は現在、2つの回避策があります。この問題に関するバグレポートがあります0遅延を伴うsetTimeoutのMediaElementSource

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

取得!どうもありがとうございました。オーディオタグにmp3がたくさんあると、next()を実行するとうまくいきません。 – echoloyuk