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事件。 在回調 function 中，只需檢查音頻元素的.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>