jQuery移动页面导航后仍在播放音频

Question

如果确实在其他地方提出并回答了这个问题，我会先道歉......我已经改写和谷歌搜索了几天来解决这个问题，但没有运气。

我承担了我的网页设计顶点课程的代码编写职责，我们正在将印刷出版物转换为数字格式。我们决定使用 jquery-mobile 框架。在此之前我没有使用 jquery 的经验，但我学得很快并且非常喜欢它。我在我们的网站上使用 jquery-ui，它使用一个带有 data-role="page" 导航的长 index.html 文件。网站内有书面作品，其中一些有音频旁白。

我已经使用了html音频标签：

<audio controls>
  <source src="audio/source.mp3" />
  <source src="audio/source.ogg" />
</audio>

音频播放得很好，但是当我导航到另一个“页面”时，音频不会停止，除非刷新整个站点或单击暂停按钮。我所理解的情况是，虽然在视觉上，该网站是从一个页面到另一个页面，但浏览器只是在一个 html 文件中移动，只显示它被告知要显示的部分。

是否有一些基本的 js 代码可以插入到我的页面中某处，告诉它当单击链接或按钮时，停止正在播放的任何音频？让我重申一下，导航都是在一个 html 文件中完成的，而不是通过链接到不同的 html 文件来完成的。

（1000 为冗长的故事道歉....认为我应该具体）

感谢所有帮助和建议

Answer 1

当导航到另一个页面时pagebeforehide 将触发。在此阶段，在该页面中找到audio 和.pause()。

$(document).on('pagebeforehide', function () {
 $(this).find('audio').each(function () {
  $(this)[0].pause();
 });
});