在Mobile Safari中重用HTML5音频对象

Question

我想播放一个简短的(少于1秒)音频文件,以响应我在iPad上的Mobile Safari中运行的Web应用程序上的用户输入,并且事件和音频播放之间的延迟最小.在页面重新加载之间可以多次触发播放,因此我想缓存音频文件.

以下播放文件的第一次点击,但之后没有任何反应:

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.

关于如何使这项工作的任何想法？提前致谢

Answer 1

设置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();
}

Answer 2

我有完全相同的问题。这是一个肮脏的伎俩，但重置声音对象上的 src 对我有用：

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