用 Shared Worker 实现多标签页音频播放唯一性，核心是通过同一 Worker 协调各页面播放状态：任一页面播放时，Worker 通知其他页面暂停，确保全局仅一路音频发声；Worker 维护共享状态，统一决策播放权并广播指令。
用 Shared Worker 实现多标签页音频播放唯一性，核心思路是让所有页面通过同一个 Shared Worker 协调播放状态——任意标签页触发播放时，Worker 通知其他页面暂停或静音，确保全局只有一路音频在发声。
Shared Worker 的基础通信结构
Shared Worker 是运行在独立线程中的脚本，多个浏览器上下文（如不同 tab、iframe）可同时连接它。它不直接访问 DOM，适合做状态协调中枢。
关键点：
- 所有页面需使用同一路径实例化
new SharedWorker('audio-manager.js')，路径必须完全一致（含协议、域名、路径），否则会创建多个独立 Worker - 页面通过
worker.port与 Worker 建立 MessageChannel 通信；Worker 端用onconnect监听新连接，并为每个 port 显式调用port.start() - Worker 内部维护一个共享状态对象（如
{ activeTabId: null, isPlaying: false }），所有连接共用同一 JS 执行环境，变量天然共享
播放控制逻辑设计
当某个页面准备播放音频时，不直接调用 audio.play()，而是先向 Shared Worker 发送请求，由 Worker 统一决策：
- 若当前无活跃播放，则允许该页面播放，并广播
{ type: 'play', tabId: 'xxx' }给其他页面 - 若已有其他页面在播放，则向原活跃页面发送
{ type: 'pause' }，再向新请求页面发{ type: 'allow-play' } - 每个页面监听 Worker 消息：收到
pause就执行audio.pause()；收到allow-play再调用audio.play() - 页面关闭或切出时（如
beforeunload或visibilitychange），主动发{ type: 'release' }给 Worker，Worker 清除对应 tabId 并移交播放权
处理常见边界情况
实际使用中需注意几个易错点：
-
tabId 唯一性：不能用
Math.random()或时间戳，建议用self.crypto.randomUUID()（现代浏览器支持）或Date.now() + Math.random()组合生成临时 ID -
自动播放策略限制：Chrome 等浏览器要求用户手势触发播放。即使 Worker 授权，页面仍需在 click/touch 等事件回调中调用
audio.play()，否则会抛异常 -
Worker 意外终止：Shared Worker 在所有端口关闭后会被系统回收。可在页面监听
worker.onmessageerror或定期 ping Worker，断连后尝试重建 - 跨域限制：Shared Worker 脚本必须与页面同源（协议+域名+端口），无法用于微前端或多子域场景；若需跨域，改用 BroadcastChannel + localStorage 作为降级方案
简易代码示意（页面端）
页面中：
const worker = new SharedWorker('audio-manager.js');
const port = worker.port;
let audio = document.getElementById('my-audio');
port.addEventListener('message', e => {
if (e.data.type === 'pause') audio.pause();
if (e.data.type === 'allow-play') audio.play().catch(e => console.warn('Play failed:', e));
});
port.start();
// 用户点击播放按钮
document.getElementById('play-btn').onclick = () => {
port.postMessage({ type: 'request-play', tabId: window.tabId });
};
// 页面卸载前释放
window.addEventListener('beforeunload', () => {
port.postMessage({ type: 'release', tabId: window.tabId });
});
Shared Worker（audio-manager.js）只需维护状态、转发消息、裁决权限，不操作音频元素本身——职责清晰，不易出错。
