多HTML页面的选择式剧情游戏音频续播方案求助

多HTML页面属于独立加载的文档，默认<audio>标签的播放状态无法跨页面保留，核心解决思路是利用浏览器的localStorage存储音频的播放进度与状态，页面切换时保存数据，新页面加载时读取并恢复播放状态。

具体实现步骤： #

1. 统一所有页面的音频标签
   在每个HTML页面中添加完全一致的<audio>标签（保证ID和音频路径完全相同）：

   <audio id="bgMusic" src="./bg-music.mp3" loop></audio>
   

2. 添加状态存储与恢复的JavaScript代码
   你可以在每个页面的<script>标签中直接写入以下代码，或者单独创建audio-control.js文件后引入所有页面：

   const audio = document.getElementById('bgMusic');
   
   // 页面加载时恢复之前的播放状态
   window.addEventListener('load', () => {
     const savedTime = localStorage.getItem('bgMusicCurrentTime');
     const isPlaying = localStorage.getItem('bgMusicIsPlaying') === 'true';
   
     // 恢复播放进度
     if (savedTime) {
       audio.currentTime = parseFloat(savedTime);
     }
   
     // 尝试恢复播放（处理浏览器自动播放限制）
     if (isPlaying) {
       audio.play().catch(() => {
         // 浏览器禁止自动播放时，绑定一次点击事件触发播放
         document.body.addEventListener('click', () => {
           audio.play();
         }, { once: true });
       });
     }
   });
   
   // 实时保存播放进度（每0.5秒更新一次）
   setInterval(() => {
     if (!audio.paused) {
       localStorage.setItem('bgMusicCurrentTime', audio.currentTime.toString());
     }
   }, 500);
   
   // 页面卸载前保存最终状态
   window.addEventListener('beforeunload', () => {
     localStorage.setItem('bgMusicIsPlaying', !audio.paused);
     localStorage.setItem('bgMusicCurrentTime', audio.currentTime.toString());
   });
   

关键注意事项： #

• 浏览器自动播放限制：现代浏览器不允许无用户交互自动播放音频，第一次加载页面时，需要用户点击页面任意位置才能启动播放，代码中已处理该场景。
• 音频路径一致性：所有页面的<audio>标签src路径必须完全一致，否则会加载不同音频导致续播失效。
• 状态重置：如果需要重置音频状态，可以在游戏重启时执行localStorage.removeItem('bgMusicCurrentTime')和localStorage.removeItem('bgMusicIsPlaying')。

进阶优化方向（可选）： #

如果后续想简化开发，可以改成单页应用模式——仅用一个HTML页面，通过JavaScript切换不同剧情内容的显示/隐藏，这样音频标签始终存在，无需跨页面存储状态，更适配剧情类游戏的交互逻辑。

内容的提问来源于stack exchange，提问作者Qinx99