Повторное использование аудиообъекта HTML5 в мобильном сафари - PullRequest
Новая
       35

Повторное использование аудиообъекта HTML5 в мобильном сафари

12 голосов
/ 26 января 2011

Я хочу воспроизвести короткий (менее 1 с) аудиофайл в ответ на ввод данных пользователем в моем веб-приложении, запущенном в Mobile Safari на iPad, с минимальной задержкой между воспроизведением события и звука.Воспроизведение может запускаться несколько раз между перезагрузками страницы, поэтому я хочу кэшировать аудиофайл.

Следующее воспроизводит файл при первом клике, но после этого ничего не происходит: 

var audio = new Audio("ack.mp3");
$("#button").click(function(e) {
  e.preventDefault();
  audio.play();
}

Если я добавлю прослушиватель событий к событию «закончилась», который перезагружает файл, я могу получить два воспроизведения от одного и того же объекта и затем тишина: 

var audio = new Audio("ack.mp3");
audio.addEventListener('ended', function() {
  audio.load();
}, false);
$("#button").click(function(e) {
  e.preventDefault();
  audio.play();
}

Если я вручную установлю атрибут currentTime на 0, например так:

var audio = new Audio("ack.mp3");
audio.addEventListener('ended', function() {
  audio.currentTime=0;
}, false);
$("#button").click(function(e) {
  e.preventDefault();
  audio.play();
}

Я получаю следующую ошибку в консоли ошибок: 

INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than the allowed value.

Есть идеи, как заставить это работать?Заранее спасибо

Ответы [ 2 ]

9 голосов
/ 29 марта 2011

установите currentTime на 0.1 вместо нуля, не используйте load(), иначе это прервет событие ended.

, если вам нужно предварительно загрузить медиа-файл, используйте: 

media.play(); //start loading
if(media.readyState !== 4){ //HAVE_ENOUGH_DATA
  media.addEventListener('canplaythrough', onCanPlay, false);
  media.addEventListener('load', onCanPlay, false); //add load event as well to avoid errors, sometimes 'canplaythrough' won't dispatch.
  setTimeout(function(){
    media.pause(); //block play so it buffers before playing
  }, 1); //it needs to be after a delay, otherwise it will block download and/or won't pause.
}else{
  onCanPlay();
}
3 голосов
/ 15 февраля 2011

У меня была точно такая же проблема.это подвох, но сброс src на звуковой объект сработал для меня: 

audio.src = audio.src;
audio.play();
...