Html5 аудио ios событие воспроизведения

Question

Я пытаюсь определить, когда начинается воспроизведение звука на ios. Проблема в том, что воспроизведение, воспроизведение событий запускается немедленно, когда я нажимаю кнопку воспроизведения, но звук начинает воспроизводиться через пару секунд. Я использую аудиофайл ~ 5 МБ.

Почему существует такая задержка между этими событиями и началом звука, и как я могу определить, когда звук действительно начинается?

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 или воспроизведение событий, прослушивание события 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>