javascript中的异步播放声音？答案

【问题标题】：Async play sound in javascript?javascript中的异步播放声音？
【发布时间】：2013-03-12 03:18:00
【问题描述】：

如何在 javascript 中异步加载声音？

我想在循环中并行播放多个声音和微积分。这是时间线：

     10 seconds           7 seconds           10 seconds
|--------------------|------------------|--------------------|--- etc
| Sound1 playing     |Sound2 playing    | Sound1 playing     |--- etc 
| Do a calculus      |Do a calculus     | Do a calculus      |--- etc

Sound1 和 Sound2 持续时间少于 5 秒计算持续 1 秒。

如何在 javascript 中做到这一点？

我必须在 HTML5 中使用 Workers 吗？

谢谢。

【问题讨论】：

您是否尝试过创建不同的<audio> 元素？在我看来，一个元素一次只能播放一种声音是合乎逻辑的
"播放声音时计时器暂停" - 如在调用 myfunction() 之间总共有 15 秒，指定的 10 秒加上 5 秒声音？
@Scanpat：上面的代码不能用吗？会发生什么？
我之前的评论是为了澄清你的意思。你是说通常setInterval 会每 10 秒调用一次你的函数，如果函数导致播放声音 next 函数的调用将被声音的长度延迟？跨度>
@nnnnnn : 为了清楚起见，我已经更新了我的帖子

标签： javascript jquery audio asynchronous

【解决方案1】：

在 JS 中异步播放声音其实很简单。您只需立即创建 new @987654321@s 和 play() 它们，而不是 play()ing 全局 Audio 对象。这是一个例子：

function playSoundAsync(url){
    new Audio(url).play();
}

因此，在您的情况下，您的代码将如下所示（涉及 setIntervals 和 setTimeouts 用于同步声音的 hack）：

// For simplicity I'll use MP3 files readily available on the Internet
var sound1url = 'https://audio.code.org/win3.mp3';
var sound2url = 'https://audio.code.org/failure3.mp3';
var calculusUrl = 'https://audio.code.org/failure1.mp3';

setInterval(function() {
    new Audio(sound1url).play();
    new Audio(calculusUrl).play();
}, 17000);
setTimeout(function() {
    setInterval(function() {
        new Audio(sound2url).play();
        new Audio(calculusUrl).play();
    }, 17000);
}, 10000);

<button onclick="new Audio(sound1url).play();">Play sound1 individually</button>
<button onclick="new Audio(sound2url).play();">Play sound2 individually</button>
<button onclick="new Audio(calculusUrl).play();">Play calculus individually</button>

此外，当您快速单击单独播放 ${sound} 按钮时，您可能会注意到这一点：新的 ${sound} 播放开始，无需等待或中断当前的 ${sound}回放！这允许您创建这样的声学混乱：

var cacophony = setInterval(function(){new Audio('https://audio.code.org/win3.mp3').play();}, 25);

&lt;button onclick="clearInterval(cacophony);"&gt;Click here to stop this cacophony&lt;/button&gt;

【讨论】：

请注意：如果您因为我没有遵循一些 JS 约定而拒绝投票，那么您可以请告诉我我违反了哪些约定？
总是“新”的对象不会占用内存吗？我尝试将它与弹跳球一起使用，并在弹跳墙壁时发出声音，如果使用更多的球，内存使用量会迅速增加。
你需要处理promise，除非你得到这样的错误Uncaught (in promise) DOMException

【解决方案2】：

您可以使用 JS 承诺和异步函数轻松地使您的音频异步播放（无需使用计时器）。

// makes playing audio return a promise
function playAudio(audio){
  return new Promise(res=>{
    audio.play()
    audio.onended = res
  })
}

// how to call
async function test(){
  const audio = new Audio('<url>')
  await playAudio(audio)
  // code that will run after audio finishes...
}

【讨论】：

【解决方案3】：

也许您正在搜索window.setInterval()。

【讨论】：

【解决方案4】：

我以 dorukayhan 的回答为基础，但我的声音会重复数千次。我担心创建多个新的音频标签最终会导致系统崩溃。

所以我创建了一个循环遍历一堆现有音频标签的函数。

标签位于 HTML 中的某个位置。我把我的放在结束