fix(audio): 修复页面加载时音频自动播放问题

- 移除音频元素的 autoplay 属性
- 将音频播放逻辑移至 window load 事件后执行
- 添加播放失败的静默错误处理
- 保留循环播放和预加载设置
- 确保用户暂停状态在24小时内被记住
- 优化音频播放时机以提升用户体验
This commit is contained in:
hehh
2025-11-28 17:02:56 +08:00
parent 3589df9032
commit c2585ea504
2 changed files with 10 additions and 7 deletions

View File

@@ -296,7 +296,7 @@
<button id="fab-music" class="fab-item"><i class="ri-music-2-line"></i><span class="fab-text">Play</span></button>
</div>
</div>
<audio id="site-audio" class="site-audio" src="data/至少做一件离谱的事-Kiri T_compressed.mp3" autoplay loop preload="auto"></audio>
<audio id="site-audio" class="site-audio" src="data/至少做一件离谱的事-Kiri T_compressed.mp3" loop preload="none"></audio>
</main>
<!-- 微信弹窗 -->

View File

@@ -1017,16 +1017,19 @@ class UIManager {
this.audio = el;
this.audio.loop = true;
// 检查是否在24小时内用户暂停过音乐
const shouldRemainPaused = this.shouldMusicRemainPaused();
// 页面加载完成后根据条件决定是否播放
window.addEventListener('load', () => {
// 检查是否在24小时内用户暂停过音乐
const shouldRemainPaused = this.shouldMusicRemainPaused();
const tryPlay = () => {
// 如果不应该保持暂停状态,则尝试播放
if (!shouldRemainPaused) {
this.audio.play().catch(() => {
// 静默处理播放失败
console.error('Failed to play audio.');
});
}
};
tryPlay();
});
}
updateCustomStyles(container, theme) {
@@ -1042,4 +1045,4 @@ class UIManager {
});
}
}
}