4

如何在 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 秒 Calculs 持续 1 秒。

我怎么能在 javascript 中做到这一点？

我必须在 HTML5 中使用 Workers 吗？

谢谢。

4

4 回答 4

7

在 JS 中异步播放声音其实很简单。您只需要立即创建s 和它们，而不是ing 全局对象。这是一个例子：new Audioplay()play()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>

此外，当您Play ${sound} individually快速单击按钮时，您可能会注意到这一点： ${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>

于 2016-12-24T23:34:48.400 回答
1

通过使用 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...
}
于 2021-08-02T22:33:04.573 回答
0

也许您正在寻找window.setInterval().

于 2014-03-06T09:15:51.557 回答
0

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

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

标签位于您的 HTML 中的某个位置。我把我的放在结束 </body> 标记之前。我的声音很短，所以 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>
于 2021-01-08T15:52:54.653 回答