feat(audio): 改进音频自动播放逻辑
- 在HTML中将音频preload属性从none改为auto - 添加用户交互检测以提高自动播放成功率 - 使用setTimeout延迟播放尝试以绕过浏览器限制 - 移除不必要的console.error输出 - 优化CSS以确保评论头像正确显示
This commit is contained in:
@@ -301,7 +301,7 @@
|
|||||||
<button id="fab-music" class="fab-item" tabindex="0"><i class="ri-music-2-line"></i><span class="fab-text">Play</span></button>
|
<button id="fab-music" class="fab-item" tabindex="0"><i class="ri-music-2-line"></i><span class="fab-text">Play</span></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<audio id="site-audio" class="site-audio" src="data/至少做一件离谱的事-Kiri T_compressed.mp3" loop preload="none"></audio>
|
<audio id="site-audio" class="site-audio" src="data/至少做一件离谱的事-Kiri T_compressed.mp3" autoplay loop preload="auto"></audio>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- 微信弹窗 -->
|
<!-- 微信弹窗 -->
|
||||||
|
|||||||
@@ -450,6 +450,12 @@
|
|||||||
height: 28px !important;
|
height: 28px !important;
|
||||||
object-fit: cover; /* 修复移动端头像拉伸问题 */
|
object-fit: cover; /* 修复移动端头像拉伸问题 */
|
||||||
}
|
}
|
||||||
|
.atk-comment>.atk-avatar img {
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center;
|
||||||
|
width: 28px !important;
|
||||||
|
height: 28px !important;
|
||||||
|
}
|
||||||
|
|
||||||
.atk-meta {
|
.atk-meta {
|
||||||
font-size: 12px !important;
|
font-size: 12px !important;
|
||||||
|
|||||||
20
js/about.js
20
js/about.js
@@ -1133,22 +1133,22 @@ class UIManager {
|
|||||||
const shouldRemainPaused = this.shouldMusicRemainPaused();
|
const shouldRemainPaused = this.shouldMusicRemainPaused();
|
||||||
// 如果不应该保持暂停状态,则尝试播放
|
// 如果不应该保持暂停状态,则尝试播放
|
||||||
if (!shouldRemainPaused) {
|
if (!shouldRemainPaused) {
|
||||||
this.audio.autoplay = true;
|
let userInteracted = true;
|
||||||
|
this.audio.play().catch(() => {
|
||||||
|
// 静默处理播放失败
|
||||||
|
userInteracted = false;
|
||||||
|
});
|
||||||
// 添加用户交互检查,避免浏览器阻止自动播放
|
// 添加用户交互检查,避免浏览器阻止自动播放
|
||||||
const attemptAutoplay = () => {
|
const attemptAutoplay = () => {
|
||||||
// 检查是否已有用户交互
|
// 检查是否已有用户交互
|
||||||
if (this.userInteracted) {
|
if (this.userInteracted === false) {
|
||||||
this.audio.play().catch(() => {
|
|
||||||
// 静默处理播放失败
|
|
||||||
console.error('Failed to play audio.');
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// 添加一次性用户交互监听器
|
// 添加一次性用户交互监听器
|
||||||
const enableAudio = () => {
|
const enableAudio = () => {
|
||||||
this.userInteracted = true;
|
this.userInteracted = true;
|
||||||
this.audio.play().catch(() => {
|
setTimeout(() => {
|
||||||
console.error('Failed to play audio.');
|
this.audio.play().catch(() => {
|
||||||
});
|
});
|
||||||
|
}, 1000);
|
||||||
document.removeEventListener('click', enableAudio);
|
document.removeEventListener('click', enableAudio);
|
||||||
document.removeEventListener('touchstart', enableAudio);
|
document.removeEventListener('touchstart', enableAudio);
|
||||||
document.removeEventListener('keydown', enableAudio);
|
document.removeEventListener('keydown', enableAudio);
|
||||||
|
|||||||
Reference in New Issue
Block a user