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

Posted 2023-02-25

【中文标题】jQuery移动页面导航后仍在播放音频

【英文标题】：audio still playing after jquery mobile page navigation

【发布时间】：2013-04-23 16:39:45

【问题描述】：

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

我承担了我的网页设计顶点课程的代码编写职责，我们正在将印刷出版物转换为数字格式。我们决定使用 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 为冗长的故事道歉....认为我应该具体）

感谢所有帮助和建议

【问题讨论】：

您能否提供用于导航到另一个“页面”的代码？一旦你离开，你可以做类似$('audio').stop();

每个页面被<div data-role="page" id="some-page"></div>分割，导航通过<a href="#some-page">Some Page></a>完成

（抱歉……还在想办法解决***的问题）

很高兴我能帮上忙 :) jQuery 很有趣且易于理解。祝你好运！

谢谢先生。学习它很有趣，但由于项目的时间限制，我只完成了亮点。学期结束后会更深入。

【参考方案1】：

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

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

【讨论】：

天哪，你现在在我的遗嘱中！！！！这不是很多，但你得到了一切！非常感谢奥马尔！

我认真地解决这个问题已经一个多星期了，但我对 js/jquery 的理解还不够，无法将不同的函数翻译成我需要的精确语法......所以再说一次，谢谢！

更新：该代码只暂停了音频标签的第一个实例，但之后没有。我碰巧在第一次测试它纯属巧合。我将如何定位音频标签的所有实例。循环遍历我认为的某种数组，但我不确定。

谢谢奥马尔！你是最棒的！

@Doran 哈哈谢谢哥们。如果您需要进一步的帮助，请告诉我。