Почему появляется ошибка при многочисленных кликах на Play в HTML5 Audio tag?

Question

[ILoveYAnny]

Здравствуйте, у меня есть много полосок с плеерами, которые генерируются после загрузки документа. Если много раз кликать на разные плееры, появляется ошибка. Как её можно избежать? Она бы мне не мешало, но у некоторых моих клиентов, не работает воспроизведение, и я не как не могу отловить ошибку. Пока знаю только об этом, и не знаю это ли является причиной..

DOMException: The play() request was interrupted by a new load request.

Так же бывает такая ошибка

Uncaught TypeError: Failed to set the 'value' property on 'HTMLProgressElement': The provided double value is non-finite.

Answer 1

[Dark Hole]

Бегло просмотрев гугл, предположу, что это связано с "гонкой" play'ев. Просто выждите время, скажем, 100мс при этой ошибке.

Comments

[ILoveYAnny]

Это не всегда так, ошибка появляется, если предыдущий элемент не загрузился..

[Dark Hole]

ILoveYAnny: ждите, пока следующий элемент загрузится, тогда

[ILoveYAnny]

Dark Hole: Я сделал флаг на начало загрузки и на конец загрузки. Когда файл загружен флаг меняется. Проблема была не из за загрузки, а из-за попытку воспроизвести аудио, во время загрузки предыдущего. В итоге я поставил Интервал в 100мс, который опрашивает готов ли элемент. Как готов, включается воспроизведение.

[Dark Hole]

ILoveYAnny: я именно про это и говорил

Answer 2

[ILoveYAnny]

: The play() request was interrupted by a new load request.
DOMException

Проблема возникает при попытке вызвать метод .play(), когда ещё элемент не загрузился.
Решение такое, делаем флаг на в месте, где меняется сурс. И на audio тег вешаем функции по dataloaded, которая меняет флаг.
А в том месте где вызывается .play(), ставить Интервал в 100мс, когда флаг готов - запускаем .play().

Uncaught TypeError: Failed to set the 'value' property on 'HTMLProgressElement': The provided double value is non-finite.

Эта ошибка появляется, когда функция пытается изменить progressbar, в то время, когда плеер ещё не начал работать.
Решение такое:
Получаем у плеера текущее время воспроизведение

var player = document.getElementById('player');
var current_time = player.currentTime;

И ставит условии изменения progressbara, if (current_time > 0), то тогда меняем progressbar.

Answer 3

[theg4sh]

Попробуйте такой вариант:

// перед началом проигрывания создать пустой audio объект
(function () {
  var audio = document.createElement('audio');
  audio.src = 'http://.../blank.mp3';
  audio.load();
  window.audio_blank = audio;
})();
window.audio_break = function () {
  // в данном случае условно считаем this элементом audio (поправить если не так)
  // По идее данная операция должна прерывать текущие загрузки контента
  this.pause()
  this.currentTime = 0;
  this.src = window.audio_blank.src;
};
// Далее в цикле пробегаемся по всем audio и ставим хуки
var audios = document.getElementsByTagName('audio');
for(var i=0; i<audios.length; i++)) {
  audios[i].addEventListener('pause', window.audio_break);
}

Теперь перед вызовом play в UI делаем pause на текущем треке.
Соответственно при динамике добавляем хук на каждый вновь создаваемый объект audio.

Так же можно вообще динамически создавать объект audio, чтобы при смене трека его(объект) деинициализировать (читай удалять).

Так же если вы используете один audio тэг для проигрывания, то стоит попробовать предварительно делать

function play(audio, src) {
audio.pause();
audio.currentTime = 0;
audio.src = src;
audio.play();
}

З.Ы. код не проверял, просто оформил в виде идеи

Comments

[ILoveYAnny]

Благодарю за помощь, но к сожалению не работает :(