javascript - Html5音频ios播放事件

Question

我正在尝试检测音频何时开始在 ios 上播放。问题是，当我按下播放时，播放、播放事件会立即触发，但音频会在几秒钟后开始播放。我正在使用约 5mb 的音频文件。

为什么这些事件和音频开始之间存在这样的延迟，以及如何检测声音何时真正开始？

document.getElementById('audio').addEventListener("play", play, false);
document.getElementById('audio').addEventListener("playing", playing, false);

function play() {
  var h = document.createElement("H1");
  var t = document.createTextNode('play');
  h.appendChild(t);
  document.body.appendChild(h);
}

function playing() {
  var h = document.createElement("H1");
  var t = document.createTextNode('playing');
  h.appendChild(t);
  document.body.appendChild(h);
}

<audio id="audio" controls preload="auto">
      <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mpeg" />
    </audio>

这里是jsfiddle，你可以在ipad上查看。

https://jsfiddle.net/pmw8fa5e/1/

Answer 1

虽然我不太确定导致 iOs 设备延迟的原因，但我建议采用一种解决方法，无论使用什么浏览器，该解决方法都应该有效。

不要监听 play 或 playing 事件，而是监听 timeUpdate 事件。在回调函数中，只需检查音频元素的 .currentTime 属性是否大于零。

document.getElementById('audio').addEventListener("timeupdate", update, false);
document.getElementById('audio').addEventListener("play", play, false);
var started = false;
var playPushed = false;
var startTime;

function update() {
  if (playPushed && !started && document.getElementById('audio').currentTime > startTime) {
    started = true;
    var h = document.createElement("H1");
    var t = document.createTextNode('playing');
    h.appendChild(t);
    document.body.appendChild(h);
  }
}

function play() {
  playPushed = true;
  startTime = document.getElementById('audio').currentTime;
}

<audio id="audio" controls preload="auto">
      <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mpeg" />
    </audio>