如何在 HTML 中继续播放相同的音乐，即使在不同的 HTML 页面上或刷新页面时也是如此

Question

我正在使用 HTML 制作一款没有任何图形的游戏，它应该是基于文本的点击游戏。我已经到了某个地步，我想在游戏中添加背景音乐并使用 <audio loop autoplay src="mymusic.mp3"></audio> 工作，每当我转到新页面时它会重新启动音乐，只听到歌曲的前 20 秒，有人知道吗解决方案？

要玩游戏点击here

Answer 1

与其制作数百个单独的页面，上面只有几个字，不如将其制作成一个巨大的页面，您可以在点击时显示和隐藏 div。这样一来，您只需编辑一页，音乐就不会停止。我觉得那将是最简单的方法。它还可以防止浏览器历史记录太长。

在这里，试试这个，超级简单：

.black{
background-color:#000;
color:#fff;
}
.black button{
background-color:#fff;
color:#000;
}
.white{
background-color:#fff;
color:#000;
}
.black button{
background-color:#000;
color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('section:not(#start)').hide();
  $('.btn').on('click', function(){
    showThis = $(this).data('target');
    $('section').hide();
    $(showThis).show();
  });
});
</script>
<section id="start" class="black">
Go <button class="btn" data-target="#upstairs">Upstairs</button>
Go <button class="btn" data-target="#downstairs">Downstairs</button>
</section>
<section id="upstairs" class="white">
Go back <button class="btn" data-target="#downstairs">Downstairs</button>
Go to the <button class="btn" data-target="#bathroom">bathroom</button>
</section>
<section id="downstairs" class="white">
Go to the <button class="btn" data-target="#bathroom">bathroom</button>
</section>
<section id="bathroom" class="black">
You're Dead. Start  <button class="btn" data-target="#start">again</button>
</section>

如何在 HTML 中继续播放相同的音乐，即使在不同的 HTML 页面上或刷新页面时也是如此

How to continue playing the same music in HTML even on different HTML pages or when you refresh the page

html

javascript

css

audio

html5-audio