Webaudio，播放声音两次答案

【问题标题】：Webaudio, play sound twiceWebaudio，播放声音两次
【发布时间】：2014-10-19 06:35:11
【问题描述】：

我正在尝试使用 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();
}

我还想分析声音可以用画布将其可视化，因此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);

我正在创建一个 new 音频上下文，因此我假设我可以在我的 html 中重复使用相同的音频元素。

【问题讨论】：

两次调用PlayAudio方法的目的是什么？
在搜索时遇到了这个小提琴。 jsfiddle.net/ikerr/WcXHK
我创建了一个小应用程序，可以识别音频文件中的鼓声。我想对此进行可视化，但没有循环播放音频。这个想法是用户可以看到应用程序在按下音频剪辑的播放按钮时工作。并且还可以重复。

标签： javascript audio web-audio-api

【解决方案1】：

通过动态创建音频元素（如这个小提琴中所示，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/

【讨论】：