当Android屏幕锁定时，如何使html 5音频继续HLS音频播放？

Question

我正在使用 HTML 5 在 Android 上的 Chrome 浏览器中播放 HLS 音频<audio>。

如何让 Chrome 在锁定流或浏览器选项卡处于非活动状态时继续播放 HLS 流？

在 iOS 上，当浏览器选项卡更改或屏幕锁定时，流将继续播放，但在 Android 上会停止音频。

<audio controls preload="meta">
    <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")
};