<audio>流切换206分片请求源致播放中断的原因与解决

当<audio>元素接收206 Content-Range分片数据时，通过Service Worker中途切换分片请求源会导致播放中断且无法恢复，求原因与解决办法。

场景背景 #

• 在局域网内部署了支持Content-Range的音频流服务器，可返回合法的206分片响应
• 客户端使用基础<audio>标签播放音频，通过Service Worker拦截请求：处于局域网时请求local.example.com（SSL证书合规，解析至私有IP如192.168.0.4），处于外网时请求example.com
• 音频播放过程中切换至外网时，Service Worker向local.example.com的请求因IP不可达失败，捕获错误后转请求example.com，客户端收到响应但音频播放中断且无法恢复

诊断信息 #

1. 客户端代码：

<audio src="example.com/api/file/12345678" hidden playsinline autoplay></audio>

2. 单独请求local.example.com或example.com均能正常流播放，仅中途切换源时出现问题
3. Service Worker核心代码：

async function fetchLocalOrRemote (request: Request) {
  try {
      const url = request.url.replace(location.origin, 'https://local.example.com')
      const response = await fetch(url, {
          headers: new Headers(request.headers),
      })
      if (response.ok) {
          return response
      }
  } catch { }
  return fetch(request)
}

async function fetchFromServer (event: FetchEvent, request: Request) {
  const response = await fetchLocalOrRemote(request)
  if (response.status === 206) {
      response.clone()
          .arrayBuffer()
          .then((buffer) => {
              // do something unrelated to cache the response
          })
  } else if (response.status === 200) {
      const cacheResponse = response.clone()
      // do something unrelated to cache the response
  }
  return response
}

async function fetchFromCache (event: FetchEvent, request: Request) {
  const response = await caches.match(event.request.url, {
      ignoreVary: true,
      ignoreSearch: true,
      cacheName: CACHES.media,
  })
  if (!response) {
      return fetchFromServer(event, request)
  }
  // something unrelated to respond from cache
}

function onFetch (event: FetchEvent) {
  const request = event.request
  if (request.method === "GET") {
      const url = new URL(request.url)
      if (url.pathname.startsWith("/api/file")) {
          event.respondWith(fetchFromCache(event, request))
      }
  }
}

self.addEventListener("fetch", onFetch)

4. 两个源返回的响应头完全一致，示例：

Request URL: https://example.com/api/file/clh2jwi0s030kyqjx2i45ct6w
Request Method: GET
Status Code: 206  (from service worker)
Referrer Policy: strict-origin-when-cross-origin

accept-ch: Sec-CH-DPR, Sec-CH-Viewport-Width, Downlink
access-control-allow-origin: https://example.com
access-control-expose-headers: Content-Range
cache-control: public, max-age=31536000
Content-Length: 524288
Content-Range: bytes 3145728-3670015/6044646
content-type: audio/MPEG
date: Thu, 04 May 2023 14:15:14 GMT
server: Apache
service-worker-allowed: /

原因分析 #

1. 音频元素的资源绑定机制：<audio>元素会将播放会话与初始请求的资源源绑定，即使Service Worker返回了同一逻辑资源的不同源响应，音频引擎会判定这是两个独立资源，无法无缝衔接分片数据。
2. 分片请求的上下文一致性问题：切换源后，新的206请求虽Content-Range参数正确，但音频引擎期望的是来自同一源的连续分片，跨源的分片响应会被视为无效续流请求，直接中断播放链路。
3. Service Worker响应处理的隐患：代码中对206响应执行clone().arrayBuffer()异步操作，该操作可能延迟响应返回给音频元素，或在克隆过程中破坏流的完整性，进一步加剧播放中断问题。

解决办法 #

方案1：触发音频元素重新加载（简单直接） #

当检测到源切换成功后，通过客户端脚本重新加载音频并恢复播放：

• 在Service Worker中，当捕获到从local.example.com切换到example.com的成功响应时，向客户端发送消息
• 客户端监听消息，记录当前播放时间后，重新加载音频并恢复到原播放位置

客户端示例代码：

navigator.serviceWorker.addEventListener('message', (event) => {
  if (event.data.type === 'SOURCE_SWITCHED') {
    const audio = document.querySelector('audio');
    const currentTime = audio.currentTime;
    audio.load();
    audio.currentTime = currentTime;
    audio.play();
  }
});

方案2：提前确定请求源，避免中途切换 #

• 提前检测网络环境（比如ping局域网服务器），在音频播放前就确定使用的源
• 第一次请求确定源后，在Service Worker的全局变量或缓存中记录该源，后续所有该音频的请求都使用同一源，直到播放结束

方案3：优化206响应的后台处理逻辑 #

将缓存操作放入后台执行，避免阻塞响应返回给音频元素：

async function fetchFromServer (event: FetchEvent, request: Request) {
  const response = await fetchLocalOrRemote(request)
  if (response.status === 206) {
      // 用waitUntil将缓存操作放入后台，不阻塞响应返回
      event.waitUntil(
          response.clone().arrayBuffer().then((buffer) => {
              // do something unrelated to cache the response
          })
      )
  } else if (response.status === 200) {
      const cacheResponse = response.clone()
      // do something unrelated to cache the response
  }
  return response
}

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