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

【问题标题】：How can I make html 5 audio continue HLS audio play when Android screen locks?Android屏幕锁定时如何使html 5音频继续播放HLS音频？
【发布时间】：2019-08-19 11:35:26
【问题描述】：

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

如何让 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"
        });
    };
}

【问题讨论】：

标签： javascript android html5-audio

【解决方案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")
};

【讨论】：