532cbafd8e
- 将音频播放器移至独立的iframe中以提升性能和隔离性 - 实现主页面与iframe之间的postMessage通信机制 - 添加音频播放状态同步和UI更新逻辑 - 支持自动播放控制和用户交互检测 - 实现播放状态持久化存储和恢复功能 - 优化移动端音频控制体验 - 添加版权信息更新和国际化支持
42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
// audio-service-worker.js
|
||
// Service Worker for background audio playback
|
||
|
||
self.addEventListener('install', event => {
|
||
self.skipWaiting();
|
||
});
|
||
|
||
self.addEventListener('activate', event => {
|
||
event.waitUntil(self.clients.claim());
|
||
});
|
||
|
||
// 监听来自主页面的消息
|
||
self.addEventListener('message', async event => {
|
||
const client = event.source;
|
||
const data = event.data;
|
||
|
||
switch (data.action) {
|
||
case 'play':
|
||
// 这里只是示例，实际上Service Worker无法直接播放音频
|
||
// 我们需要采用另一种方式实现
|
||
break;
|
||
|
||
case 'pause':
|
||
break;
|
||
|
||
case 'setTrack':
|
||
break;
|
||
}
|
||
});
|
||
|
||
// 使用 Broadcast Channel API 在页面间通信
|
||
const broadcastChannel = new BroadcastChannel('audio-control');
|
||
|
||
broadcastChannel.addEventListener('message', event => {
|
||
const data = event.data;
|
||
// 将消息转发给所有客户端
|
||
self.clients.matchAll().then(clients => {
|
||
clients.forEach(client => {
|
||
client.postMessage(data);
|
||
});
|
||
});
|
||
}); |