Firefox 中的 WebAudio MediaElementSourceNode答案

【问题标题】：WebAudio MediaElementSourceNode in FirefoxFirefox 中的 WebAudio MediaElementSourceNode
【发布时间】：2016-09-14 03:45:47
【问题描述】：

我正在尝试使用 MediaElementSourceNodes 创建一个简单的 WebAudio Player。在 Google Chrome 上按预期工作，但在 Firefox 中它第一次播放正常，但是当我尝试重新启动它时，它不会产生任何声音（没有记录错误）。一种解决方案是为在 Firefox 上运行的音频元素创建新源，但在 Chrome 上它给了我 Uncaught InvalidStateError: Failed to execute 'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode. 另一个解决方案是创建新的音频元素，它适用于所有浏览器，但它会重新下载 mp3 文件，这并不理想，因为我尝试使用它超过两次。你能解释一下这种行为和可能的解决方案吗？ https://jsfiddle.net/0gw86dzn/（我使用的是Firefox Developer Edition 48.0a2 (2016-05-16)）

<html>
    <body>
        <input type="button" value="stop" id="stop">
        <input type="button" value="play" id="play">
        <script>
            var context = new AudioContext();

            var audio = new Audio("test.mp3");
            audio.controls = true;

            var source = context.createMediaElementSource(audio);
            source.connect(context.destination);

            var play = document.getElementById('play')
            play.onclick = function () {
              //source = context.createMediaElementSource(audio); // firefox is happy, but chrome bugs.

              //audio = new Audio("test.mp3"); //works, but it redownloads the audio.

              audio.play();
            }

            var stop = document.getElementById('stop');
            stop.onclick = function () {
              audio.pause();
              audio.currentTime = 0;
            }
      </script>
    </body>
</html>

【问题讨论】：

标签： javascript firefox web-audio-api

【解决方案1】：

在您的停止方法中“断开”您的目标源，然后在您的播放方法中重新“连接”您的目标源。这应该可以解决您的问题。

【讨论】：