在第一个完成播放后播放第二个音频

Posted 2023-02-25

【中文标题】在第一个完成播放后播放第二个音频

【英文标题】：Play second audio after the first has finished playing

【发布时间】：2018-04-26 10:14:38

【问题描述】：

我有以下 html：

<audio autoplay id="background_audio">
      <source src="https://sporedev.ro/pleiade/hol.mp3" type="audio/mpeg">
</audio>

上面的代码在后台播放一些音乐。

<audio autoplay>
  <source src="https://sporedev.ro/pleiade/sounds/swoosh-enter.mp3" type="audio/mpeg">
</audio>

当用户进入页面时，这段代码会播放一个嗖嗖声。

我有以下 JS：

<script>
    var audio = document.getElementById('background_audio');

    document.getElementById('mute').addEventListener('click', function (e)
    
        e = e || window.event;
        audio.muted = !audio.muted;
        e.preventDefault();
    , false);
</script>   

此代码用于当用户点击某个 div 时将背景音乐静音。

这是JSFiddle。

我正在从事的项目的链接是here。

我正在尝试创建一个不会播放位于background_audio id 中的audio 的脚本直到 一定数量的秒（例如，5 秒）已经过去所以使 swoosh 声音可以在开始音乐之前完成播放。

我对 SO 和 Google 进行了一些研究，并得出结论，使用 preventDefault() 将是解决方案，但我未能实施该解决方案。

在 swoosh 声音播放完毕后，如何在background_audio id 中制作音乐？

【参考方案1】：

你可以使用onendedevents，在第一个结束后播放你的第二个音频。

var audio1 = document.getElementById("another_audio");
audio1.onended = function() 
  console.log('Playing background audio')
  var audio2 = document.getElementById("background_audio");
  audio2.play();
;

<audio id="background_audio">
  <source src="https://sporedev.ro/pleiade/hol.mp3" type="audio/mpeg">
</audio>

<audio autoplay id="another_audio">
  <source src="https://sporedev.ro/pleiade/sounds/swoosh-enter.mp3" type="audio/mpeg">
</audio>