Javascript Web音频API：如何重新开始播放声音？_Javascript_Google Chrome_Html5 Audio

Javascript Web音频API：如何重新开始播放声音？

javascript google-chrome

Javascript Web音频API：如何重新开始播放声音？,javascript,google-chrome,html5-audio,Javascript,Google Chrome,Html5 Audio,我用Chrome编写了一个基本脚本，它使用新的Web音频Api加载3个声音文件（通过XMLHTTPRequest）并分别播放它们。我为每个声音提供了一个单独的按钮，允许用户启动和停止每个声音脚本立即加载所有三个声音文件，完成后，取消播放按钮的暗显，以便用户只能在声音准备好后点击播放。此外，声音是循环的，因此当点击按钮时，每个按钮上的标签在“播放”和“停止”之间变化这一切都很好。。。当你点击播放按钮时，你会听到循环声，当你点击停止时，声音停止。但是，当您第二次尝试重新播放同一声音时，该声音将不

我用Chrome编写了一个基本脚本，它使用新的Web音频Api加载3个声音文件（通过XMLHTTPRequest）并分别播放它们。我为每个声音提供了一个单独的按钮，允许用户启动和停止每个声音

脚本立即加载所有三个声音文件，完成后，取消播放按钮的暗显，以便用户只能在声音准备好后点击播放。此外，声音是循环的，因此当点击按钮时，每个按钮上的标签在“播放”和“停止”之间变化

这一切都很好。。。当你点击播放按钮时，你会听到循环声，当你点击停止时，声音停止。但是，当您第二次尝试重新播放同一声音时，该声音将不会再次开始播放。每次单击“播放/停止”按钮时，都会调用相应的playSound（）或stopSound（）函数，并传入相应的参数，但由于某些原因，我无法再次播放声音。我做错什么了吗

这是我的密码：

<body>

<label for="playBtn1">Moog:</label>
<input id="playBtn1" type="button" value="Play" disabled />
<label for="playBtn1">Drums:</label>
<input id="playBtn2" type="button" value="Play" disabled />
<label for="playBtn1">Choir:</label>
<input id="playBtn3" type="button" value="Play" disabled />

<script>
  var playBtn1 = document.getElementById("playBtn1");
  var playBtn2 = document.getElementById("playBtn2");
  var playBtn3 = document.getElementById("playBtn3");

  var context = new webkitAudioContext();

  var soundBuffer1 = null;
  var soundBuffer2 = null;
  var soundBuffer3 = null;

  var soundBufferSourceNode1 = context.createBufferSource();
  soundBufferSourceNode1.looping = true;
  var soundBufferSourceNode2 = context.createBufferSource();
  soundBufferSourceNode2.looping = true;
  var soundBufferSourceNode3 = context.createBufferSource();
  soundBufferSourceNode3.looping = true;

  loadSound('micromoog.wav', 1);
  loadSound('breakbeat-drum-loop.wav', 2);
  loadSound('choir.wav', 3);

  playBtn1.addEventListener("click", function(e) {
    if(this.value == "Play") {
      this.value = "Stop";
      playSound(soundBuffer1, soundBufferSourceNode1);
    } else if(this.value == "Stop") {
      this.value = "Play";
      stopSound(soundBufferSourceNode1);
    }
  }, false);
  playBtn2.addEventListener("click", function(e) {
    if(this.value == "Play") {
      this.value = "Stop";
      playSound(soundBuffer2, soundBufferSourceNode2);
    } else if(this.value == "Stop") {
      this.value = "Play";
      stopSound(soundBufferSourceNode2);
    }
  }, false);
  playBtn3.addEventListener("click", function(e) {
    if(this.value == "Play") {
      this.value = "Stop";
      playSound(soundBuffer3, soundBufferSourceNode3);
    } else if(this.value == "Stop") {
      this.value = "Play";
      stopSound(soundBufferSourceNode3);
    }
  }, false);

  function loadSound(url, bufferNum) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';

    // Decode asynchronously
    request.onload = function() {
      var successCallback = function(buffer) {
        switch(bufferNum) {
          case 1:
            soundBuffer1 = buffer;
            playBtn1.disabled = false;
          break;
          case 2:
                soundBuffer2 = buffer;
            playBtn2.disabled = false;
          break;
          case 3:
            soundBuffer3 = buffer;
            playBtn3.disabled = false;
          break;
        }
      }
      var errorCallback = function(e) {
      console.log(e);
      }
      context.decodeAudioData(request.response, successCallback, errorCallback);
    }

    request.send();
  }

  function playSound(buffer, bufferSourceNode) {
    bufferSourceNode.buffer = buffer;
    bufferSourceNode.connect(context.destination);
    bufferSourceNode.noteOn(0);
  }

  function stopSound(bufferSourceNode) {
    bufferSourceNode.noteOff(0);
  }
</script>

</body>


穆格：
鼓：
唱诗班：
var playBtn1=document.getElementById（“playBtn1”）；
var playBtn2=document.getElementById（“playBtn2”）；
var playBtn3=document.getElementById（“playBtn3”）；
var context=新的webkitAudioContext（）；
var soundBuffer1=null；
var soundBuffer2=null；
var soundBuffer3=null；
var soundBufferSourceNode1=context.createBufferSource（）；
soundBufferSourceNode1.looping=true；
var soundBufferSourceNode2=context.createBufferSource（）；
soundBufferSourceNode2.looping=true；
var soundBufferSourceNode3=context.createBufferSource（）；
soundBufferSourceNode3.looping=true；
负载声音（'micromoog.wav'，1）；
负载声音（'breakbeat-drum-loop.wav'，2）；
负载声音（'唱诗班波浪'，3）；
playBtn1.addEventListener（“单击”，函数（e）{
如果（this.value==“播放”）{
this.value=“停止”；
播放声音（soundBuffer1、soundBufferSourceNode1）；
}else if（this.value==“停止”）{
this.value=“Play”；
停止声音（soundBufferSourceNode1）；
}
}，假）；
playBtn2.addEventListener（“单击”，函数（e）{
如果（this.value==“播放”）{
this.value=“停止”；
播放声音（soundBuffer2，soundBufferSourceNode2）；
}else if（this.value==“停止”）{
this.value=“Play”；
停止声音（soundBufferSourceNode2）；
}
}，假）；
playBtn3.addEventListener（“单击”，函数（e）{
如果（this.value==“播放”）{
this.value=“停止”；
播放声音（soundBuffer3、soundBufferSourceNode3）；
}else if（this.value==“停止”）{
this.value=“Play”；
停止声音（soundBufferSourceNode3）；
}
}，假）；
函数loadSound（url、bufferNum）{
var request=new XMLHttpRequest（）；
打开（'GET'，url，true）；
request.responseType='arraybuffer'；
//异步解码
request.onload=函数（）{
var successCallback=函数（缓冲区）{
开关（bufferNum）{
案例1：
soundBuffer1=缓冲区；
playBtn1.disabled=false；
打破
案例2：
soundBuffer2=缓冲区；
playBtn2.disabled=false；
打破
案例3：
soundBuffer3=缓冲区；
playBtn3.disabled=false；
打破
}
}
var errorCallback=函数（e）{
控制台日志（e）；
}
解码音频数据（request.response、successCallback、errorCallback）；
}
request.send（）；
}
播放声音功能（缓冲区、缓冲源节点）{
bufferSourceNode.buffer=缓冲区；
连接（context.destination）；
bufferSourceNode.noteOn（0）；
}
功能停止声音（bufferSourceNode）{
bufferSourceNode.noteOff（0）；
}

还有，是否有人知道，一旦播放完非循环声音，可能会触发任何类型的事件？如果我可以将这些声音设置为非循环，并且在播放完声音后，使用这样的事件切换其标签，那就太酷了。我看不到规范中的任何内容，但也许有更好的方法

谢谢，

布拉德。

我只是在学习网络音频API。乍一看，我会说这是因为你应该在每次播放声音时创建BufferSource，而看起来你只是第一次这么做。查看此处的示例：

我知道这已经晚了一年，但我遇到了类似的问题，进行了一些快速搜索，以下是我的发现：

在本页中：

然后参考以下问题：

“如何检查AudioSourceNode何时完成播放？”
“我有一个AudioBufferSourceNode，我刚刚用noteOn（）播放了它，我想再播放一次，但noteOn（）什么都不做！救命！”

据我所知：从createBufferSource（）创建的源只能播放一次。一旦停止，就必须创建一个新的。如果您想知道某个特定声音何时停止播放，则不存在发送该声音的事件；所以你必须使用一个超时

希望这有帮助

你修过这个吗？我有一个类似的问题。我在这里有完全相同的问题！：你有什么想法吗。当源完成播放时没有事件-现在有一个“onended”回调。我刚刚在ChromeV35中验证了它的工作原理：audioSource.oneded=function（）{playingSound=false；}；感谢Anders Lauritsen在此评论中提供的提示：