如何在多页面HTML游戏中实现跨页面的连续音频播放-html教程-PHP中文网

如何在多页面HTML游戏中实现跨页面的连续音频播放

通过iframe嵌套游戏页面，将音频控件置于主html中，可避免页面跳转时音频重置，实现背景音乐无缝续播。

通过iframe嵌套游戏页面，将音频控件置于主html中，可避免页面跳转时音频重置，实现背景音乐无缝续播。

在基于多HTML文件构建的选择式文字冒险游戏中，常见的痛点是：每切换一个故事分支页面（如 scene1.html → scene2.html），浏览器会重新加载整个页面，导致

推荐方案：单页外壳 + iframe 动态加载
将整个游戏逻辑封装为多个独立的子页面（如 start.html、forest.html、cave.html），但不直接跳转，而是统一由一个主容器页面（如 index.html）承载：

<!-- index.html（唯一入口，始终驻留） -->



  <title>我的选择故事游戏</title><style>
    body { margin: 0; font-family: "Segoe UI", sans-serif; }
    #game-frame { 
      width: 100vw; 
      height: 85vh; 
      border: none; 
      display: block; 
    }
    #audio-controls {
      position: fixed; 
      bottom: 0; 
      width: 100%; 
      background: #2c3e50; 
      padding: 12px; 
      color: white; 
      text-align: center;
    }
  </style><!-- 音频元素固定在主页面，不受iframe刷新影响 --><audio id="bgm" src="assets/music/ambient-loop.mp3" loop preload="auto"></audio><!-- 游戏内容动态加载至此iframe --><iframe id="game-frame" src="scenes/start.html"></iframe>

  <!-- 简易控制栏（可选） -->
  <div id="audio-controls">
    <button onclick="document.getElementById('bgm').play()">▶ 播放</button>
    <button onclick="document.getElementById('bgm').pause()">⏸ 暂停</button>
    <button onclick="document.getElementById('bgm').volume = 0.6">? 音量</button>
  </div>

  <script>
    // 提供子页面调用接口（如点击选项后跳转场景）
    window.loadScene = function(scenePath) {
      document.getElementById('game-frame').src = `scenes/${scenePath}`;
    };
  </script>

在子页面（如 scenes/forest.html）中，所有交互均通过 JavaScript 调用父窗口的 window.parent.loadScene() 来切换场景，而非使用跳转：

<!-- scenes/forest.html -->
<h2>幽暗森林</h2>
<p>你听到远处传来低沉的鼓声...</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
														src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
													<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
<button onclick="window.parent.loadScene('cave.html')">走进山洞</button>
<button onclick="window.parent.loadScene('river.html')">沿河前行</button>

✅ 优势总结：