HLS 音频在 Safari 上不稳定，但在其他主要浏览器上很好答案

【问题标题】：HLS audio is choppy on Safary, but good on other major browsersHLS 音频在 Safari 上不稳定，但在其他主要浏览器上很好
【发布时间】：2021-12-19 05:56:20
【问题描述】：

我有三个 HTML5 媒体标签。一个视频和两个音频。我通过 HLS 流式传输它们。我有以下 HLS 设置代码。

音频在除 Safari 之外的主要浏览器上都很好。 macOS 和 iOS 上的 Safari 音频都断断续续。我想知道我是否遗漏了设置 HLS 的内容？

<video id="vid" preload="metadata" muted playsinline></video>
<audio id="human" preload="metadata" playsinline></audio>
<audio id="racoon" preload="metadata" playsinline></audio>

<script>
    // HLS setup for media.
    var media = document.getElementById('vid');
    var mediaSrc = 'media/vid/playlist.m3u8';
    // First check for native browser HLS support
    if (media.canPlayType('application/vnd.apple.mpegurl')) {
      media.src = mediaSrc;
      // If no native HLS support, check if HLS.js is supported
    } else if (Hls.isSupported()) {
      var hls = new Hls();
      hls.loadSource(mediaSrc);
      hls.attachMedia(media);
    } else {
      // Alert only once. Don't alert for other video/audio tags.
      alert("Your browser doesn't support HTTP Live Streaming.")
    }
  </script>
  <script>
    // HLS setup for media.
    var media = document.getElementById('human');
    var mediaSrc = 'media/human/playlist.m3u8';
    // First check for native browser HLS support
    if (media.canPlayType('application/vnd.apple.mpegurl')) {
      media.src = mediaSrc;
      // If no native HLS support, check if HLS.js is supported
    } else if (Hls.isSupported()) {
      var hls = new Hls();
      hls.loadSource(mediaSrc);
      hls.attachMedia(media);
    }
  </script>
  <script>
    // HLS setup for media.
    var media = document.getElementById('racoon');
    var mediaSrc = 'media/racoon/playlist.m3u8';
    // First check for native browser HLS support
    if (media.canPlayType('application/vnd.apple.mpegurl')) {
      media.src = mediaSrc;
      // If no native HLS support, check if HLS.js is supported
    } else if (Hls.isSupported()) {
      var hls = new Hls();
      hls.loadSource(mediaSrc);
      hls.attachMedia(media);
    }
  </script>

【问题讨论】：

您能详细说明“断断续续”是什么意思吗？有录音吗？它与您的代码没有任何关系，因为您所做的只是设置src。可能与编码的音频有关，但可能完全是另一回事。源采样率是多少？
@Brad 音频以 48KHz 采样率录制。我怀疑的是，在服务器端，我正在准备一个视频和两个音频，具有相同的FFmpeg script。
@Brad By choppy 我的意思是音频不连续。他们经常被打断。
你能发一段录音吗？它们是否以完全有规律的间隔被打断？音高是否正确？这里没有什么可以帮助你的，对不起。发布更多信息和录音。问题不在于您的代码。

标签： javascript audio video http-live-streaming hls.js

【解决方案1】：

我有三个 HTML 媒体标签，一个视频和两个音频：


    <video id="vid" preload="metadata" muted playsinline>
      <source src="media/vid/playlist.m3u8">
      <source src="media/vid.mp4" type="video/mp4">
      <source src="media/vid.mov" type="video/mp4">
      <source src="media/vid.webm" type="video/webm">
      <source src="media/vid.ogv" type="video/ogg">
      Your browser does not support the vedio tag.
    </video>

    <audio id="human" preload="metadata" playsinline>
      <source src="media/human/playlist.m3u8">
      <source src="media/human.m4a" type="audio/mpeg">
      <source src="media/human.ogg" type="audio/ogg">
      <source src="media/human.mp3" type="audio/mpeg">
      Your browser does not support the audio tag.
    </audio>
 
    <audio id="racoon" preload="metadata" playsinline>
      <source src="media/racoon/playlist.m3u8">
      <source src="media/racoon.m4a" type="audio/mpeg">
      <source src="media/racoon.ogg" type="audio/ogg">
      <source src="media/racoon.mp3" type="audio/mpeg">
      Your browser does not support the audio tag.
    </audio>

我正在获取媒体元素：

      var vid = document.getElementById("vid")
      var audioHuman = document.getElementById("human")
      var audioRaccoon = document.getElementById("racoon")

然后，我使用回调来播放视频：

      // When video is playing, move slider and play audio.
      vid.addEventListener("timeupdate", timeUpdate)

回调根据视频更新音频当前时间：

    function timeUpdate() {
      t = vid.currentTime
     

        // Human voice isn't synced with video. It was a recording mistake.
        // Compensate for the mistake.
        var audioHumanOffset = 1.4
 
        audioHuman.currentTime = t - audioHumanOffset
        audioRaccoon.currentTime = t
      

    }

上面的回调是 Safari 上音频不好的原因。去掉上面的回调后，Safar 的音频就很好了 =)

上述回调被完全不同的逻辑所取代，以保持视频和音频同步。

【讨论】：