fix(audio): 修复页面加载时音频自动播放问题
- 移除音频元素的 autoplay 属性 - 将音频播放逻辑移至 window load 事件后执行 - 添加播放失败的静默错误处理 - 保留循环播放和预加载设置 - 确保用户暂停状态在24小时内被记住 - 优化音频播放时机以提升用户体验
This commit is contained in:
@@ -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>
|
||||
|
||||
<!-- 微信弹窗 -->
|
||||
|
||||
13
js/about.js
13
js/about.js
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user