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) %>

我的宝石文件：

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

未经测试且感觉有点hacky，但是当turbolinks加载新页面时应停止播放音频：

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

Answer 2

这个问题与turbolinks的运作方式有关。自2017年Turbolinks 5发布以来，他们更改了可用的页面事件。 Here你可以找到我们现在拥有的各种可能性。

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

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

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

2 个答案: