Question

我有以下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。

我尝试创建一个脚本，该脚本无法播放位于audio ID 中的background_audio，直到一定的秒数（对于例子，5s）已经通过，以便在开始播放音乐之前可以完成swoosh声音。

我对SO和Google进行了一些研究，得出的结论是preventDefault()的某些用法将成为解决方案，但我无法实施解决方案。

在swoosh声音播放结束后如何在background_audio id中制作音乐？

Answer 1

您可以使用onended events，在第一个结束后播放第二个音频。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: