如何在Firefox頁面刷新時停止HTML5音頻

在我的Rails應用程序中，我有一個視圖，當您刷新頁面時，新歌會播放。如何在Firefox頁面刷新時停止HTML5音頻

當我手動刷新頁面時，舊歌停止播放，新歌開始播放。但是，在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

來源

2015-02-24 Katie H

如果這適用於所有的瀏覽器但Firefox，它聽起來並不像一個Rails或Ruby的問題，它是HTML。 – 2015-02-24 18:27:03

有什麼想法？我是否必須編寫JavaScript函數才能使瀏覽器停止播放以前的文件？它是不是應該自動停止播放舊的音頻文件，當頁面刷新？這可能與firefox如何響應turbolinks有關嗎？ – 2015-02-24 18:34:54

'turbolinks' < - 這是一個重要的信息。鑑於您的「重新加載」鏈接只是導航到相同的位置，turbolinks通過JS即時重建頁面。 **你實際上並沒有刷新頁面。** – Substantial 2015-02-24 18:41:25

未經測試，感覺有點哈克，而是應該從何時turbolinks加載了新的一頁停止播放音頻：

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

來源

2015-02-25 02:09:55 ihaztehcodez

感謝您的支持！我試過了，它沒有工作:(我應該試試停止而不是暫停嗎？ – 2015-02-25 03:33:04

'pause（）'函數來自[HTMLMediaElement]（https://developer.mozilla.org/en-US/docs/ Web/API/HTMLMediaElement），它不包含'stop（）'函數。在'turbolinks 1.3.0'中添加'page：before-change'事件 - 你使用的是turbolinks = 1.3.0嗎？ – ihaztehcodez 2015-02-25 03:40:32

我正在使用turbolinks的最新版本，我只是編輯了我的答案，以顯示我的gem文件中有什麼。 – 2015-02-25 03:43:16

此問題與turbolinks的工作方式有關。自從2017年發佈Turbolinks 5以來，他們稍微改變了可用的頁面事件。 Here你可以找到我們現在擁有的廣泛的可能性。

爲了阻止前面的音頻播放，您可以使用下面的代碼在適當咖啡文件：

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

來源

2017-02-08 10:08:52 w1t3k

如何在Firefox頁面刷新時停止HTML5音頻

回答

相關問題