ILoveYAnny
@ILoveYAnny

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

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

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.
  • Вопрос задан
  • 2212 просмотров
Решения вопроса 2
abyrkov
@abyrkov
JavaScripter
Бегло просмотрев гугл, предположу, что это связано с "гонкой" play'ев. Просто выждите время, скажем, 100мс при этой ошибке.
Ответ написан
ILoveYAnny
@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.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@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();
}


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы