如何在PWA中实现后台音频播放？

针对你的场景，有几个基于Web标准的方案可以替代现有<audio>流的实现，解决连接中断、音频截断的问题，同时支持后台播放：

1. Web Audio API + Service Worker 架构（推荐） #

Web Audio API比原生<audio>元素更灵活，结合Service Worker可以在后台（标签页非活跃/PWA后台）处理音频播放和流数据：

处理服务器连续音频流 #

放弃让<audio>直接挂在流端点，改用WebSocket或Server-Sent Events(SSE) 从服务器接收音频片段：

• 在Service Worker中建立WebSocket/SSE连接，监听服务器推送的音频数据块
• 收到数据后，用AudioContext解码音频缓冲，通过AudioBufferSourceNode播放
• 这种方式不会因为HTTP连接超时导致中断，还能精确控制每一段音频的播放，避免结尾截断

示例代码片段（Service Worker中）：

// 初始化AudioContext（需要用户授权后才能创建）
let audioCtx;
self.addEventListener('message', async (event) => {
  if (event.data.type === 'INIT_AUDIO') {
    audioCtx = new AudioContext();
  }
});

// 监听WebSocket的音频数据
const socket = new WebSocket('wss://your-server/stream');
socket.onmessage = async (event) => {
  if (!audioCtx) return;
  // 解码音频数据
  const audioBuffer = await audioCtx.decodeAudioData(event.data);
  // 创建播放节点
  const source = audioCtx.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(audioCtx.destination);
  source.start();
};

处理推送通知触发的单个MP3 #

结合Push API和Service Worker，收到推送时直接在后台播放：

• 提前请求用户的推送权限和音频播放权限
• 收到推送事件后，在Service Worker中fetch MP3文件，解码后用Web Audio播放

示例代码片段（Service Worker中）：

self.addEventListener('push', async (event) => {
  const payload = event.data?.json();
  if (!payload?.audioUrl || !audioCtx) return;
  
  // 获取MP3文件并解码
  const response = await fetch(payload.audioUrl);
  const arrayBuffer = await response.arrayBuffer();
  const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);
  
  // 播放音频
  const source = audioCtx.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(audioCtx.destination);
  source.start();
});

2. 修复现有<audio>方案的临时措施 #

如果不想完全重构，可以针对现有问题优化：

• 解决连接中断：给流端点添加心跳机制（比如每隔30秒发送空数据维持连接），或者改用WebSocket替代HTTP流，避免超时断开
• 解决音频截断：监听<audio>的timeupdate事件，记录当前播放位置，当连接中断时，请求服务器补发最后一段音频；或者用Web Audio接管<audio>的缓冲数据，确保全部播放完成

3. 关键权限注意事项 #

• 必须让用户通过主动交互（比如点击"授权后台播放"按钮）授予自动播放权限，浏览器默认禁止后台自动播放音频
• PWA添加到主屏幕后，后台运行权限会更稳定，避免被浏览器休眠

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