feat(audio): 优化背景音乐播放控制

- 实现音频状态的本地存储与恢复功能
- 添加定期自动保存播放状态机制
- 支持页面加载时恢复上次播放位置
- 增强自动播放逻辑，提升用户体验
- 监听多种用户交互事件触发音频播放
- 添加音频播放结束后的自动重播功能
- 优化静音与播放状态切换逻辑
- 提升移动端触摸事件对音频控制的支持

christmas.html

@@ -1269,7 +1269,7 @@
 </script>
 
 <script>
-    // --- 音频播放控制优化脚本 (保持原样) ---
+    // --- 音频播放控制优化脚本 ---
     document.addEventListener('DOMContentLoaded', function () {
         const audio = document.getElementById('bg-music');
         const audioControl = document.getElementById('audio-control');
@@ -1278,6 +1278,47 @@
         let isPlaying = false;
         let isMuted = true;
 
+        // 确保音频循环播放
+        audio.loop = true;
+        
+        // 保存音频状态到 localStorage
+        function saveAudioState() {
+            localStorage.setItem('bgMusicState', JSON.stringify({
+                isPlaying: isPlaying && !audio.paused,
+                isMuted: isMuted,
+                currentTime: audio.currentTime
+            }));
+        }
+        
+        // 从 localStorage 恢复音频状态
+        function restoreAudioState() {
+            try {
+                const savedState = localStorage.getItem('bgMusicState');
+                if (savedState) {
+                    const state = JSON.parse(savedState);
+                    isMuted = state.isMuted;
+                    audio.muted = isMuted;
+                    
+                    // 如果之前正在播放，则尝试继续播放
+                    if (state.isPlaying) {
+                        setTimeout(() => {
+                            audio.play().catch(e => console.log("Restore playback failed:", e));
+                        }, 100);
+                    }
+                    
+                    updateAudioState();
+                }
+            } catch (e) {
+                console.log("Failed to restore audio state:", e);
+            }
+        }
+        
+        // 页面加载时尝试恢复音频状态
+        restoreAudioState();
+        
+        // 定期保存音频状态
+        setInterval(saveAudioState, 5000); // 每5秒保存一次
+
         function updateAudioState() {
             audio.muted = isMuted;
             if (isPlaying) {
@@ -1289,6 +1330,7 @@
             }
         }
 
+        // 尝试自动播放音频
         try {
             const playPromise = audio.play();
             if (playPromise !== undefined) {
@@ -1308,6 +1350,8 @@
             isMuted = true;
             updateAudioState();
         }
+
+        // 自动播放函数
         function autoPlay() {
             audio.play().then(() => {
                 isPlaying = true;
@@ -1317,6 +1361,8 @@
                 console.error("Autoplay failed:", e);
             });
         }
+
+        // 控制音频播放/暂停和静音
         audioControl.addEventListener('click', function () {
             if (audio.paused && !isPlaying) {
                 audio.play().then(() => {
@@ -1338,10 +1384,40 @@
                 });
             }
         });
+
+        // 用户交互时尝试播放音频
         document.addEventListener('click', autoPlay);
         document.addEventListener('keydown', autoPlay);
-        audio.addEventListener('play', () => { isPlaying = true; updateAudioState(); });
+        document.addEventListener('touchstart', autoPlay, { passive: true });
-        audio.addEventListener('pause', () => { isPlaying = false; updateAudioState(); });
+        
+        // 监听音频事件
+        audio.addEventListener('play', () => { 
+            isPlaying = true; 
+            updateAudioState(); 
+            saveAudioState();
+        });
+        
+        audio.addEventListener('pause', () => { 
+            isPlaying = false; 
+            updateAudioState(); 
+            saveAudioState();
+        });
+        
+        audio.addEventListener('ended', () => {
+            // 音频结束时重新播放（作为额外保障）
+            if (!audio.loop) {
+                audio.currentTime = 0;
+                audio.play().catch(e => console.error("Replay failed:", e));
+            }
+        });
+        
+        // 监听时间更新事件，用于保存播放位置
+        audio.addEventListener('timeupdate', () => {
+            // 每10秒保存一次状态
+            if (Math.floor(audio.currentTime) % 10 === 0) {
+                saveAudioState();
+            }
+        });
     });
 </script>
 <script>