feat(audio): 优化音频自动播放逻辑以适应浏览器策略
- 添加用户交互检查,避免浏览器阻止自动播放 - 实现一次性用户交互监听器,提升播放体验 - 保留requestAnimationFrame以确保播放时机准确 - 增加多种用户交互事件支持(点击、触摸、键盘、鼠标移动)
This commit is contained in:
25
js/about.js
25
js/about.js
@@ -1133,12 +1133,35 @@ class UIManager {
|
|||||||
const shouldRemainPaused = this.shouldMusicRemainPaused();
|
const shouldRemainPaused = this.shouldMusicRemainPaused();
|
||||||
// 如果不应该保持暂停状态,则尝试播放
|
// 如果不应该保持暂停状态,则尝试播放
|
||||||
if (!shouldRemainPaused) {
|
if (!shouldRemainPaused) {
|
||||||
requestAnimationFrame(() => {
|
this.audio.autoplay = true;
|
||||||
|
// 添加用户交互检查,避免浏览器阻止自动播放
|
||||||
|
const attemptAutoplay = () => {
|
||||||
|
// 检查是否已有用户交互
|
||||||
|
if (this.userInteracted) {
|
||||||
this.audio.play().catch(() => {
|
this.audio.play().catch(() => {
|
||||||
// 静默处理播放失败
|
// 静默处理播放失败
|
||||||
console.error('Failed to play audio.');
|
console.error('Failed to play audio.');
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
// 添加一次性用户交互监听器
|
||||||
|
const enableAudio = () => {
|
||||||
|
this.userInteracted = true;
|
||||||
|
this.audio.play().catch(() => {
|
||||||
|
console.error('Failed to play audio.');
|
||||||
});
|
});
|
||||||
|
document.removeEventListener('click', enableAudio);
|
||||||
|
document.removeEventListener('touchstart', enableAudio);
|
||||||
|
document.removeEventListener('keydown', enableAudio);
|
||||||
|
document.removeEventListener('mousemove', enableAudio);
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('click', enableAudio, { once: true });
|
||||||
|
document.addEventListener('touchstart', enableAudio, { once: true });
|
||||||
|
document.addEventListener('keydown', enableAudio, { once: true });
|
||||||
|
document.addEventListener('mousemove', enableAudio, { once: true });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
requestAnimationFrame(attemptAutoplay);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user