feat(audio): 重构音频播放功能以支持iframe隔离播放

- 将音频播放器移至独立的iframe中以提升性能和隔离性
- 实现主页面与iframe之间的postMessage通信机制
- 添加音频播放状态同步和UI更新逻辑
- 支持自动播放控制和用户交互检测
- 实现播放状态持久化存储和恢复功能
- 优化移动端音频控制体验
- 添加版权信息更新和国际化支持
This commit is contained in:
hehh
2025-11-30 16:42:00 +08:00
parent 30e13e5bde
commit 532cbafd8e
5 changed files with 405 additions and 32 deletions

View File

@@ -413,5 +413,26 @@
}()
}({id: SiteConfig.analytics.tencent.id, ck: SiteConfig.analytics.tencent.ck});
</script>
<!-- 隐藏的音频播放iframe -->
<iframe id="audio-player-iframe" src="audio-player.html" style="display: none;"></iframe>
<script>
// 音频控制逻辑
let audioIframe = document.getElementById('audio-player-iframe');
// 监听来自iframe的消息
window.addEventListener('message', function(event) {
// 确保消息来自我们的iframe
if (event.source !== audioIframe.contentWindow) return;
const data = event.data;
if (data.playing && data.action === 'playerReady') {
// iframe准备就绪设置初始音频
audioIframe.contentWindow.postMessage({
action: 'setTrack',
src: 'data/至少做一件离谱的事-Kiri T_compressed.mp3'
}, '*');
}
});
</script>
</body>
</html>
</html>