Как запускать воспроизведение аудио только тогда, когда предыдущий звук был проигран полностью?

Question

[Janjabuja]

Есть такой код. Он запускает поочереди звуки. Как сделать так, чтобы если я снова запускаю эту функцию, то пока предыдущий треклист не проиграл полностью следующий не запустится?

var audio = new Audio();
audio.onended = function(e)
{
  var target = e.target;
  var cur_src = target.getAttribute('src');
  switch(cur_src)
  {
     case '1.mp3': target.setAttribute('src', '2.mp3'); break;
     case '2.mp3': target.setAttribute('src', '3.mp3'); break;
     case '3.mp3': target.setAttribute('src', '1.mp3'); break;
  }
  target.play();
};
audio.setAttribute('src', '1.mp3');
audio.autoplay = true;

Comments

[Web Dentist]

как на счёт того чтобы сделать код более читабельным?

Answer 1

[0xD34F]

Сделайте очередь:

const
  audio = new Audio(),
  queue = []

audio.onended = function() {
  if (queue.length) {
    audio.src = queue.shift()
    audio.play()
  }
}

function play(srcArray) {
  queue.push(...srcArray)

  if (audio.paused) {
    audio.onended()
  }
}

play([ '1.mp3', '2.mp3', '3.mp3' ])

Comments

[Janjabuja]

Смотрите я делаю движок для озвучки очереди типо: "Талон В32, пройдите к окну 3". Для каждой очереди свои треки записанны. Нужно сделать так, чтобы когда вызывают одну очередь и вторую одновременно, чтобы не было наложения звука друг на друга. Как мне реализовать очередность, чтобы страница ждала пока вопроизведет одну очередь и как только она сказала начал говорить второй и так далее?

[0xD34F]

Janjabuja, можно по окончанию аудио в очереди (oneded, если queue.length равно нулю) генерировать событие, в обработчике которого запускать следующую очередь.

А, ну и конечно надо будет разделить запуск очереди и добавление в неё новых элементов.