如何在 Firefox 中停止页面刷新时的 HTML5 音频

Question

在我的 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) %>

我的 gemfile：

gem 'jquery-turbolinks'
gem 'jquery-ui-rails'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc

Answer 1

未经测试，感觉有点老套，但应该会在 turbolinks 加载新页面时停止播放音频：

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

Answer 2

这个问题显然与 turbolinks 的工作方式有关。自 2017 年 Turbolinks 5 发布以来，他们对可用页面事件进行了一些更改。 Here 你可以找到我们现在拥有的大量可能性。

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

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

如何在 Firefox 中停止页面刷新时的 HTML5 音频

How do I stop HTML5 audio upon page refresh in Firefox

firefox

ruby-on-rails

html5-audio

turbolinks