在移动Safari中重复使用HTML5音频对象

Question

我希望在我的网页应用中，响应用户输入时，在iPad上运行的Mobile Safari中播放一段短暂的（少于1秒）音频文件，并在事件和音频播放之间具有最小的延迟。由于在页面重新加载之间可以多次触发播放，因此我想要缓存该音频文件。

以下代码可以在第一次点击时播放文件，但之后不会有任何反应：

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

如果我给"ended"事件添加一个重新载入文件的监听器，那么我可以从同一对象中获得两个播放，并且最后会只有静音：

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.

任何关于如何使这个工作的想法吗？提前感谢。

- derfred

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

- Miller Medeiros

Answer 2

我遇到了完全相同的问题。虽然这种方法有点“卑鄙”，但在我的情况下，重置声音对象上的src属性解决了问题：

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

- clamp

---

尝试了这个方法，但看起来需要在播放之间添加2秒的延迟。否则，后续的播放就不会发生。 - Crashalot

这对我也不起作用。即使在iOS 7中（最后回复来自2011年2月）。 - Nitzan Wilnai