我正在嘗試爲HTML5音頻創建一個圖形均衡器類型可視化 - Chrome僅在此時使用webkitAudioContext。HTML5音頻API - 「AudioContext構造不可用的音頻資源」
當我嘗試更改音頻的來源即播放不同的歌曲時,我發現了不尋常的和不可預知的行爲。我讀的地方,我應該等到音頻的「canplay」事件將其連接到上下文/分析儀之前觸發:
var context, sourceNode, analyser, javascriptNode, audio;
var ctx = $("#songcanvas").get()[0].getContext("2d");
function loadSong(url) {
if (audio!=undefined) { audio.pause(); }
audio = new Audio();
audio.src = url;
audio.addEventListener("canplay", function(e) {
setupAudioNodes();
}, false);
}
function setupAudioNodes() {
context = new webkitAudioContext();
javascriptNode = context.createJavaScriptNode(2048, 1, 1);
javascriptNode.connect(context.destination);
analyser = context.createAnalyser();
analyser.smoothingTimeConstant = 0.3;
analyser.fftSize = 512;
sourceNode = context.createMediaElementSource(audio);
sourceNode.connect(analyser);
analyser.connect(javascriptNode);
sourceNode.connect(context.destination);
javascriptNode.onaudioprocess = function() {
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
ctx.clearRect(0, 0, 1000, 325);
ctx.fillStyle="rgba(32, 45, 21,1)";
drawSpectrum(array);
}
audio.play();
}
function drawSpectrum(array) {
for (var i = 0; i < (array.length); i++){
var value = array[i];
ctx.fillRect(i*5,325-value,3,325);
}
};
前三四次我更改信號源,它的工作原理,然後最終失敗與「未捕獲的SyntaxError:爲AudioContext建設不可用音頻資源」
這裏充分http://jsfiddle.net/eAgQN/
偉大的工作。謝謝。 – user888734 2013-02-19 17:23:28