Блог

Я воспроизводю звук HLS в браузере Chrome на Android с использованием HTML 5 <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"
        });
    };
}
  

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