Как я могу заставить html 5 audio продолжать воспроизведение HLS, когда экран Android блокируется?

Question

Я играю аудио HLS в браузере Chrome на Android, используя html 5 audio.

Как заставить Chrome воспроизводить поток HLS в потоке блокировки или когда вкладка браузера неактивна?

В iOS поток продолжит воспроизводиться, когда вкладка браузера будет изменена или экран заблокирован, но остановит звук в Android.

      <source
        src="http://qthttp.apple.com.edgesuite.net/1010qwoeiuryfg/sl.m3u8"
        type="application/x-mpegURL"
      />
    </audio>

Я даже добавил информацию mediaSession, чтобы попытаться помочь ей.

    var audio = document.getElementById("audio");
    if ("mediaSession" in navigator) {
      audio.onplay = function() {
        navigator.mediaSession.metadata = new MediaMetadata({
          title: "TEST",
          artist: "ARTIST"
        });
      };
    }

Answer 1

Android будет воспроизводить потоки hls изначально, но если вам нужно поведение, при котором он воспроизводится на экране блокировки, используйте hls.js

let audio = document.getElementById("hls-audio");
let source = "http://qthttp.apple.com.edgesuite.net/1010qwoeiuryfg/sl.m3u8"

if (Hls.isSupported()) {
  console.log("hello hls.js!");

  let hls = new Hls();
  hls.attachMedia(audio);
  hls.on(Hls.Events.MEDIA_ATTACHED, () => {
    console.log("video and hls.js are now bound together !");
    hls.loadSource(source);
  });
}
audio.onplay = () => {
  console.log("we can track events the same way with hls.js")
};