From 30e13e5bde2819b75dd02aceed73e2edba19dace Mon Sep 17 00:00:00 2001
From: hehh <lingtinzhe@icloud.com>
Date: Sun, 30 Nov 2025 16:13:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(audio):=20=E4=BC=98=E5=8C=96=E9=9F=B3?=
 =?UTF-8?q?=E9=A2=91=E8=87=AA=E5=8A=A8=E6=92=AD=E6=94=BE=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E4=BB=A5=E9=80=82=E5=BA=94=E6=B5=8F=E8=A7=88=E5=99=A8=E7=AD=96?=
 =?UTF-8?q?=E7=95=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加用户交互检查，避免浏览器阻止自动播放
- 实现一次性用户交互监听器，提升播放体验
- 保留requestAnimationFrame以确保播放时机准确
- 增加多种用户交互事件支持（点击、触摸、键盘、鼠标移动）
---
 js/about.js | 35 +++++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/js/about.js b/js/about.js
index 66a88e2..4433cff 100644
--- a/js/about.js
+++ b/js/about.js
@@ -1133,12 +1133,35 @@ class UIManager {
             const shouldRemainPaused = this.shouldMusicRemainPaused();
             // 如果不应该保持暂停状态，则尝试播放
             if (!shouldRemainPaused) {
-                requestAnimationFrame(() => {
-                    this.audio.play().catch(() => {
-                        // 静默处理播放失败
-                        console.error('Failed to play audio.');
-                    });
-                });
+                this.audio.autoplay = true;
+                // 添加用户交互检查，避免浏览器阻止自动播放
+                const attemptAutoplay = () => {
+                    // 检查是否已有用户交互
+                    if (this.userInteracted) {
+                        this.audio.play().catch(() => {
+                            // 静默处理播放失败
+                            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);
             }
         });
     }