在 Mobile Safari 中重用 HTML5 音频对象

我希望在 iPad 上的 Mobile Safari 中运行的 Web 应用程序上播放一个简短（小于 1 秒）的音频文件，以响应用户输入，同时将事件和音频播放之间的延迟降至最低。在页面重新加载之间可以多次触发播放，因此我想缓存音频文件。

以下内容在第一次单击时播放文件，但之后没有任何反应：

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.

关于如何实现这项工作有什么想法吗？提前致谢

set currentTime to 0.1不要使用而不是零load()否则会破坏ended event.

如果您需要预加载媒体文件，请使用：

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