Javascript Webaudio,播放声音两次
我正在试验WebAudio,并使用以下javascript代码加载声音Javascript Webaudio,播放声音两次,javascript,audio,web-audio-api,Javascript,Audio,Web Audio Api,我正在试验WebAudio,并使用以下javascript代码加载声音 function playAudio(){ var audio = document.getElementById('music'); var audioContext = new webkitAudioContext(); var analyser = audioContext.createAnalyser(); var source = audioContext.createMediaEl
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();
}
我还想分析声音,可以用画布将其可视化,因此,分析器
。第一次运行时效果很好,但是如果我运行此函数两次,就会出现错误
> 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中重复使用相同的音频元素 通过动态创建音频元素(如本小提琴所示),我可以反复播放歌曲
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);
函数createAudioElement(URL){
var audioElement=document.createElement(“音频”);
audioElement.autoplay=true;
audioElement.loop=false;
对于(变量i=0;i
演示:调用PlayAudio方法两次的目的是什么?在搜索时遇到此小提琴。我创建了一个小应用程序,可以识别音频文件中的drumkick。我想将其视觉化,但不想让音频循环。这个想法是,用户可以通过按下音频剪辑的播放按钮看到应用程序的工作。并且能够重复。