我正在尝试使用 WebAudio,并使用以下 javascript 代码加载声音。
function playAudio(){
var audio = document.getElementById('music');
var audioContext = new webkitAudioContext();
var analyser = audioContext.createAnalyser();
var source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);
audio.play();
}
我还想分析声音,可以使用 Canvas 将其可视化,因此需要分析器
。第一次它工作正常,但如果我运行这个函数两次,我就会收到错误。
> playAudio(); // works fine, i can hear a sound
> playAudio(); // error
InvalidStateError: Failed to execute 'createMediaElementSource' on 'AudioContext': invalid HTMLMediaElement.
是什么导致了这个错误?我知道错误是由这行代码引起的:
var source = audioContext.createMediaElementSource(audio);
我正在创建一个新的音频上下文,所以我假设我可以在我的html中重复使用相同的音频元素。
最佳答案
通过动态创建音频元素(如这个 fiddle http://jsfiddle.net/ikerr/WcXHK/ 所示),我能够重复播放这首歌。
function createAudioElement(urls) {
var audioElement = document.createElement("audio");
audioElement.autoplay = true;
audioElement.loop = false;
for (var i = 0; i < urls.length; ++i) {
var typeStr = "audio/" + urls[i].split(".").pop();
if (audioElement.canPlayType === undefined ||
audioElement.canPlayType(typeStr).replace(/no/, "")) {
var sourceElement = document.createElement("source");
sourceElement.type = typeStr;
sourceElement.src = urls[i];
audioElement.appendChild(sourceElement);
console.log("Using audio asset: " + urls[i]);
}
}
return audioElement;
}
var audioContext = new webkitAudioContext();
function playAudio(){
var audio = createAudioElement(['http://www.soundjay.com/button/button-1.mp3' ]);
if(audio){
var source = audioContext.createMediaElementSource(audio);
var analyser = audioContext.createAnalyser();
source.connect(analyser);
analyser.connect(audioContext.destination);
audio.play();
}
}
playAudio(); // works fine, i can hear a sound
playAudio();
//setTimeout(playAudio,2000);
关于javascript - Webaudio,播放声音两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26447987/