Webaudio，播放聲音兩次

我正在試驗WebAudio，並使用以下JavaScript代碼加載聲音。Webaudio，播放聲音兩次

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(); 
}

我也想分析的聲音可以用帆布進行可視化，因此analyser。它第一次正常工作，但如果我運行這個函數兩次，我得到一個錯誤。

> 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，我可以重新使用相同的音頻元素。

來源

2014-10-19 cantdutchthis

什麼是調用PlayAudio方法兩次的用意何在？ – Raathigesh 2014-10-19 06:51:37

搜索時遇到了這個小提琴。 http://jsfiddle.net/ikerr/WcXHK/ – Raathigesh 2014-10-19 06:55:03

我已經創建了一個識別音頻文件中的鼓聲的小應用程序。我想對此進行視覺化處理，但是沒有音頻循環。這個想法是，用戶可以看到應用程序按下音頻剪輯的播放按鈕。也可以重複。 – cantdutchthis 2014-10-19 06:55:49

通過動態創建音頻元素（如此小提琴中所示，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);

演示：http://jsfiddle.net/raathigesh/fueg3mk7/10/

來源

2014-10-19 07:20:31 Raathigesh

Webaudio，播放聲音兩次

回答

相關問題