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