9

タグから FFT データを取得したいのですが、<audio>構文エラーがなければ機能しません。Web Audio API ドキュメントを見て、サンプル コードを書きます。これが私のコードです。

<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 です。コードに何か問題があるはずで、オーディオ タグから周波数データを取得する方法を知りたいです。 .

4

1 に答える 1

3

window.onload の前に呼び出すと createMediaSourceElement が壊れてしまうようです。この問題に関するバグ レポートがあります: http://code.google.com/p/chromium/issues/detail?id=112368

現在、次の 2 つの回避策があります。

javascript全体を実行する前にウィンドウロードイベントを待ちます

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

また

遅延が 0 の setTimeout で MediaElementSource を作成する

setTimeout(function (){
  var streamingAudioSource = audioContext.createMediaElementSource(audioElement);
  var jsProcessor = audioContext.createJavaScriptNode(4096,1,1);
  // The rest of the code
}, 0);
于 2012-05-09T15:57:19.553 に答える