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 设备上的延迟，但我建议采用一种解决方法，无论使用什么浏览器都应该有效。

监听 timeUpdate 事件，而不是监听 play 或 playing 事件。在回调函数内部，只需检查音频元素的 .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>