Воспроизвести второй звук после того, как первый закончил играть - PullRequest
Новая
       7

Воспроизвести второй звук после того, как первый закончил играть

0 голосов
/ 26 апреля 2018

У меня есть следующий 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>

Этот код используется для отключения фоновой музыки, когда пользователь нажимает на определенный элемент.

Вот JSFiddle .

Ссылка на проект, над которым я работаю: здесь .

Я пытаюсь создать скрипт, который не будет воспроизводить audio, расположенный в background_audio id до тех пор, пока не пройдет определенное количество секунд (например, 5 с), чтобы Звук свиста может закончиться до запуска музыки.

Я провел некоторое исследование SO и Google и пришел к выводу, что некоторое использование preventDefault() будет решением, однако я не смог его реализовать.

Как сделать музыку в идентификаторе background_audio после завершения воспроизведения звука swoosh?

1 Ответ

0 голосов
/ 26 апреля 2018

Вы можете использовать onended события , воспроизводить второй звук после окончания первого. 

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