Question

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

为什么这些evet和音频启动之间会有这样的延迟，我如何检测声音何时真正开始？

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

HTML5音频iOS播放事件

1 个答案: