From 67b7c0e5f9326db941944b19bc26eea9a2c52072 Mon Sep 17 00:00:00 2001
From: hehh <lingtinzhe@icloud.com>
Date: Sun, 30 Nov 2025 18:27:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(audio):=20=E6=94=B9=E8=BF=9B=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?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在HTML中将音频preload属性从none改为auto
- 添加用户交互检测以提高自动播放成功率
- 使用setTimeout延迟播放尝试以绕过浏览器限制
- 移除不必要的console.error输出
- 优化CSS以确保评论头像正确显示
---
 about.html     |  2 +-
 css/artalk.css |  6 ++++++
 js/about.js    | 20 ++++++++++----------
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/about.html b/about.html
index bff3813..ac92b68 100644
--- a/about.html
+++ b/about.html
@@ -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>
             </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>
 
     <!-- 微信弹窗 -->
diff --git a/css/artalk.css b/css/artalk.css
index 192041c..0212fd8 100644
--- a/css/artalk.css
+++ b/css/artalk.css
@@ -450,6 +450,12 @@
     height: 28px !important;
     object-fit: cover; /* 修复移动端头像拉伸问题 */
   }
+  .atk-comment>.atk-avatar img {
+    object-fit: cover;
+    object-position: center;
+    width: 28px !important;
+    height: 28px !important;
+  }
 
   .atk-meta {
     font-size: 12px !important;
diff --git a/js/about.js b/js/about.js
index 4433cff..d8caa9c 100644
--- a/js/about.js
+++ b/js/about.js
@@ -1133,22 +1133,22 @@ class UIManager {
             const shouldRemainPaused = this.shouldMusicRemainPaused();
             // 如果不应该保持暂停状态，则尝试播放
             if (!shouldRemainPaused) {
-                this.audio.autoplay = true;
+                let userInteracted = true;
+                this.audio.play().catch(() => {
+                    // 静默处理播放失败
+                    userInteracted = false;
+                });
                 // 添加用户交互检查，避免浏览器阻止自动播放
                 const attemptAutoplay = () => {
                     // 检查是否已有用户交互
-                    if (this.userInteracted) {
-                        this.audio.play().catch(() => {
-                            // 静默处理播放失败
-                            console.error('Failed to play audio.');
-                        });
-                    } else {
+                    if (this.userInteracted === false)  {
                         // 添加一次性用户交互监听器
                         const enableAudio = () => {
                             this.userInteracted = true;
-                            this.audio.play().catch(() => {
-                                console.error('Failed to play audio.');
-                            });
+                            setTimeout(() => {
+                                this.audio.play().catch(() => {
+                                });
+                            }, 1000);
                             document.removeEventListener('click', enableAudio);
                             document.removeEventListener('touchstart', enableAudio);
                             document.removeEventListener('keydown', enableAudio);