在javascript中异步播放声音

Async play sound in javascript?

本文关键字：播放声音 异步 javascript      更新时间：2023-09-26

如何在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中使用worker ?

谢谢。

在JS中异步播放声音实际上非常简单。你只需要马上创建new Audio和play()，而不是play()全局的Audio对象。下面是一个例子:

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

所以在你的例子中，你的代码看起来像这样(通过一个涉及setInterval s和setTimeout s的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);
<button onclick="clearInterval(cacophony);">Click here to stop this cacophony</button>

你可以很容易地让你的音频播放异步(不使用定时器)通过使用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...
}

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

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

标签放在HTML的某个地方。我把我的放在结尾标签。我的声音是短暂的哔哔声，所以10个标签就足够播放流畅了，但你可以试验音频标签的数量。

<audio id="audio0"></audio>
<audio id="audio1"></audio>
<audio id="audio2"></audio>
<audio id="audio3"></audio>
<audio id="audio4"></audio>
<audio id="audio5"></audio>
<audio id="audio6"></audio>
<audio id="audio7"></audio>
<audio id="audio8"></audio>
<audio id="audio9"></audio>

//declare a global counter in your script
<script>
var audiocount=0;
/*other code...*/
/*call to play sound*/
Playsound('mysound.wav')
/*other code*.../
/*add function to play sounds*/
function Playsound(MySoundPlay)
{
   /*id() is a shortcut for getElementById*/
   id('audio'+audiocount).src=MySoundPlay
   id('audio'+audiocount).play()
   audiocount++;
   /*reset your counter according to no. of audio tags you created*/
   if (audiocount>9){audiocount=0;}  
}
/*shortcut function for getElementById*/
function id(myID){return document.getElementById(myID)}
</script>

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

相关文章：