Safari浏览器HLS音频卡顿但其他主流浏览器播放正常问题咨询

问题原因&解决方案 #

你的HLS逻辑本身没有语法错误，卡顿是Safari原生HLS播放器的特有限制导致的，对应修复点如下：

• 用户交互上下文缺失
  macOS/iOS Safari要求媒体资源的加载/播放必须在用户主动触发的交互事件（点击/触摸等）回调内执行，你当前的代码是页面加载完成后直接给媒体赋值src，不在用户交互上下文内，会被Safari限制加载速度、甚至中断缓冲，最终表现为卡顿。其他浏览器及Hls.js的MSE实现对该限制要求更宽松，所以播放正常。
  修复方式：把HLS初始化逻辑封装为公共函数，绑定到用户点击播放的交互事件中，同时给Safari原生播放逻辑显式调用load()方法：

  // 公共初始化函数
  function initHls(mediaEl, src) {
    if (mediaEl.canPlayType('application/vnd.apple.mpegurl')) {
      mediaEl.src = src;
      // 新增显式load调用
      mediaEl.load();
    } else if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(src);
      hls.attachMedia(mediaEl);
    }
  }
  
  // 示例：绑定到播放按钮点击事件
  document.querySelector('#play-human-btn').addEventListener('click', () => {
    const humanAudio = document.getElementById('human');
    initHls(humanAudio, 'media/human/playlist.m3u8');
    humanAudio.play();
  })
  

• 并发加载超出Safari限制
  你当前页面加载时同时初始化3个HLS流，Safari对同域名下的并发HTTP请求数限制更严格，多个HLS流同时下载切片会导致请求排队，缓冲跟不上播放速度就会卡顿。
  修复方式：按需加载，仅在用户需要播放对应媒体时才初始化对应的HLS流，不要页面加载时一次性初始化全部3个流。
• HLS流编码/切片不符合Safari规范
  Safari原生HLS播放器对流参数的要求远严格于Hls.js，以下参数不匹配会直接导致卡顿：
  • 音频编码必须为AAC-LC，采样率仅支持44.1kHz/48kHz，单声道/立体声比特率不要超过192kbps
  • TS切片时长控制在6~10s，不要超过10s
  • 切片的PTS/DTS时间戳必须连续无跳变，Hls.js会自动修正时间戳错误但原生播放器不会
  • 服务器必须支持Range请求，返回206 Partial Content响应，跨域场景下CORS头必须明确允许当前域名、允许Range请求头，不能使用通配符*
• 新增卡顿/错误监听定位问题
  可以给音频标签添加事件监听，快速定位卡顿原因：

  document.getElementById('human').addEventListener('stalled', () => {
    console.log('缓冲中断，可尝试重新加载流')
  })
  document.getElementById('human').addEventListener('error', (e) => {
    console.log('播放错误', e)
  })
  

内容的提问来源于stack exchange，提问作者Megidd