feat(audio): 重构音频播放功能以支持iframe隔离播放
- 将音频播放器移至独立的iframe中以提升性能和隔离性 - 实现主页面与iframe之间的postMessage通信机制 - 添加音频播放状态同步和UI更新逻辑 - 支持自动播放控制和用户交互检测 - 实现播放状态持久化存储和恢复功能 - 优化移动端音频控制体验 - 添加版权信息更新和国际化支持
This commit is contained in:
23
index.html
23
index.html
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user