即使在不同的 HTML 页面上或刷新页面时，如何继续以 HTML 格式播放相同的音乐

Posted 2023-02-25

【中文标题】即使在不同的 HTML 页面上或刷新页面时，如何继续以 HTML 格式播放相同的音乐

【英文标题】：How to continue playing the same music in HTML even on different HTML pages or when you refresh the page

【发布时间】：2018-02-20 16:38:24

【问题描述】：

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

要玩游戏请点击here

【问题讨论】：

网站上的问题：一个例子：***.com/questions/15612120/…

***.com/questions/15612120/…

【参考方案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 还很陌生，我什至没有想到这一点，这需要一段时间，但我想我会试一试

绝对值得。您必须添加一些小的 javascript，但它只是在单击链接时隐藏或显示 div。给每个部分一个 ID，然后....我会更新我的答案给你看。

嗨，我已经尝试用我自己的游戏做你上面所说的，但 jQuery 不起作用。我在头部有库的链接，并复制并粘贴了上面的代码，但将 .btn id 和部分的类更改为 div。当我在 chrome 中打开游戏时没有任何反应，就好像 jQuery 不存在一样，但是当我尝试在这个网站上使用代码 sn-p 并从我的文件复制并粘贴到堆栈溢出的代码 sn-p 时，它适用于一些原因。如果您有解决方案，请告诉我，如果没有，您可以给我一个脚本，让我在没有 jQuery 的情况下执行此操作吗？谢谢

@Teo 我更新了我的答案。它可能不起作用的原因是 jQuery 脚本需要包装在 document.ready(function() code here ); 我认为这里的 sn-ps 预加载或自动考虑它，这就是它在这里工作的原因。这能帮你解决吗？ :)