Ruby on rails 如何在Firefox页面刷新时停止HTML5音频

在我的Rails应用程序中，我有一个视图，当你刷新页面时，会播放一首新歌

当我手动刷新页面时，旧歌曲停止播放，新歌曲开始播放。但是，在Firefox中，当我点击视图中的按钮刷新页面时，一首新歌开始播放，但前一首歌继续播放如何让这首歌正常工作，使上一首歌停止？

它适用于除Firefox之外的所有浏览器

以下是我的看法：

<audio controls autoplay >
  <source src="<%= @song.mp3.url %>" type="audio/mp3">
Your browser does not support the audio element.
</audio>

<%= link_to "Reload", url_for(params) %>

---

未经测试，感觉有点黑，但在TurboLink加载新页面时应停止播放音频：

$(document).on('page:before-change', function(event) {
  $('audio').pause();
  return true;
});

---

这个问题显然与TurboLink的工作方式有关。 自2017年发布《Turbolinks 5》以来，他们稍微改变了可用页面事件。你可以找到我们现在拥有的各种可能性

为了停止以前的音频播放，您可以在适当的咖啡文件中使用以下代码：

---

如果这适用于除Firefox以外的所有浏览器，听起来不像Rails或Ruby问题，而是HTML。有什么想法吗？我是否必须编写JavaScript函数才能让浏览器停止播放以前的文件？当页面刷新时，它不应该自动停止播放旧的音频文件吗？这可能与firefox如何响应turbolinks有关吗？？？

turbolinks

我如何让turbolinks刷新部件？我对您的设计了解不够，除了禁用turbolinks之外，无法推荐其他解决方案。谢谢！我尝试了它，但没有成功：（我应该尝试停止而不是暂停吗？

pause（）

函数来自，它不包括

stop（）

功能。

页面：更改前

事件添加到

turbolinks 1.3.0

-您是否使用

turbolinks>=1.3.0

？我使用的是turbolinks的最新版本。我刚刚编辑了我的答案，以显示我的gemfile中的内容。嗯…我现在无法猜测。我无法用turbolinks 2.2.1和火狐35。

$(document).on('page:before-change', function(event) {
  $('audio').pause();
  return true;
});

$(document).on 'turbolinks:click', ->
  $('audio').remove(); //or just pause as previous person advised