关于javascript：Web音频API：如何重新开始播放声音？

2023-03-22 13:33| 来源: 网络整理| 查看: 265

我已经在Chrome中编写了一个基本脚本，该脚本使用新的Web Audio Api加载3个声音文件(通过XMLHTTPRequest)并分别播放每个声音文件。我为每种声音提供了一个单独的按钮，允许用户启动和停止每种声音。

该脚本会立即加载所有三个声音文件，完成后将取消播放按钮的亮度，因此用户只有在声音准备好后才能点击播放。此外，声音在循环，因此单击按钮时，每个按钮上的标签在" Play "和" Stop "之间切换。

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

这是我的代码：

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 Moog: Drums: Choir: 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); }

还有，有人知道一旦播放完非循环声音就会触发任何类型的事件吗？如果我可以将这些声音设置为非循环，并且在声音播放完毕后立即使用此类事件来切换其标签，那将很酷。我在规格中看不到任何东西，但也许有更好的方法吗？

谢谢，布拉德

相关讨论你有没有解决这个问题？我遇到类似的问题。我这里有完全一样的问题！：有什么想法吗？

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

在此页面中：http://updates.html5rocks.com/2012/01/Web-Audio-FAQ

然后参考以下问题：

"如何检查AudioSourceNode何时播放完毕？" "我有一个AudioBufferSourceNode，我刚刚用noteOn()播放了，我想再次播放，但是noteOn()没做任何事情！帮助！"

据我了解：从createBufferSource()创建的源只能播放一次。一旦停止，就必须创建一个新的。如果您想知道何时停止播放某种特定的声音，则没有任何事件可以分派它。因此您必须使用超时。

希望这会有所帮助！

相关讨论回覆。当源完成播放时没有事件-现在有一个" onended"回调。我刚刚验证了它在Chrome v35中可以正常工作：audioSource.onended = function(){playingSound = false; };感谢Anders Lauritsen在此处提供注释的提示：updates.html5rocks.com/2012/01/Web-Audio-FAQ

只需自己学习Web Audio API。乍一看，这是因为您应该在每次播放声音时都创建createBufferSource，而且看来您只在第一次时才创建。在此处查看示例：http://www.html5rocks.com/en/tutorials/webaudio/intro/

【本文地址】

公司简介

联系我们