HTML5音頻停止功能

我玩上各個環節的點擊一個小的音頻剪輯在我的導航HTML5音頻停止功能

HTML代碼：

<audio tabindex="0" id="beep-one" controls preload="auto" > 
    <source src="audio/Output 1-2.mp3"> 
    <source src="audio/Output 1-2.ogg"> 
</audio>

JS代碼：

$('#links a').click(function(e) { 
    e.preventDefault(); 
    var beepOne = $("#beep-one")[0]; 
    beepOne.play(); 
});

它的工作這麼好遠。

問題是當一個聲音剪輯已經運行，我點擊任何鏈接什麼也沒有發生。

我試圖阻止對鏈接的點擊已經播放的聲音，但對於在HTML5的音頻API

我嘗試下面的代碼沒有直接的事件，但它不工作

$.each($('audio'), function() { 
    $(this).stop(); 
});

任何請提出建議？

來源

2013-02-12 Alok Jain

227

，而不是stop()，你可以嘗試使用：

sound.pause(); 
sound.currentTime = 0;

這應該收到預期的效果

來源

2013-02-12 15:37:01 kr1

我愛你，救更多的痛苦:) – 2014-02-03 13:04:22

這不是在Chrome工作。音頻元素不斷加載音頻，這不是應該發生的。 – Pieter 2014-11-04 19:28:24

在Chrome中，'

首先你必須設置一個ID爲您的音頻元素

在你的js

：

var ply = document.getElementById('player');

var oldSrc = ply.src; //只是記得老源

ply.src = ""; //停止播放器必須更換沒事

來源

2013-03-21 05:29:08 zaki

音頻流的最佳解決方案 – Hossein 2014-10-15 21:03:11

well..that將使音頻源文件 – 2015-09-08 05:00:28

的另一個網絡請求音頻將不會播放，直到加載，這將導致播放音頻不必要的延遲。 – Abhi 2015-11-26 06:51:22

作爲一個側面說明來源和，因爲我最近在使用公認的提供的停止方法回答，根據該鏈接：

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

通過設置currentTime的手動一個可以點火，該音頻單元上的「canplaythrough」事件。在鏈接中提到Firefox，但是我在Chrome上手動設置currentTime後遇到此事件。所以如果你的行爲附加在這個事件上，你可能會在音頻循環中結束。

來源

2014-08-09 01:47:06 shamangeorge

shamangeorge寫道：

通過設置currentTime的手動一個可以觸發音頻元素的 'canplaythrough' 事件。

這確實會發生什麼，並且暫停也會觸發pause事件，這兩者都使這種技術不適合用作「停止」方法。此外，如果啓用autoplay，則設置src如zaki建議的設置將使播放器嘗試加載當前頁面的URL作爲媒體文件（並失敗） - 不允許將src設置爲null;它將始終被視爲URL。除了銷燬播放器對象之外，似乎沒有提供「停止」方法的好方法，所以我建議只放棄專用停止按鈕並提供暫停和跳回按鈕 - 停止按鈕不會真正添加任何功能。

來源

2014-11-23 22:59:50

這種方法是「蠻力」，但它假定使用jQuery是「允許的」。圍繞你的「球員」<audio></audio>標籤與一個股利（在這裏與「plHolder」的ID）。

<div id="plHolder"> 
    <audio controls id="player"> 
    ... 
    </audio> 
<div>

那麼這個JavaScript應該工作：

function stopAudio() { 
    var savePlayer = $('#plHolder').html(); // Save player code 
    $('#player').remove(); // Remove player from DOM 
    $('#FlHolder').html(savePlayer); // Restore it 
}

來源

2015-03-19 16:03:12 user3062615

在上面的回答中，zaki解釋了同樣的事情，而不使用jquery。 – 2015-03-23 06:49:05

我沒有試驗它，但我不確定他的方法是否有效，如果有多個標籤。 – user3062615 2015-03-28 17:25:26

'＃FlHolder'似乎是'＃plHolder'的一個錯字 – 2015-12-02 11:26:00

從我自己的JavaScript函數來切換播放/暫停 - 因爲我處理無線電流，我想它清除緩衝區，以便聽衆最終不會與電臺同步。

function playStream() { 

     var player = document.getElementById('player'); 

     (player.paused == true) ? toggle(0) : toggle(1); 

} 

function toggle(state) { 

     var player = document.getElementById('player'); 
     var link = document.getElementById('radio-link'); 
     var src = "http://192.81.248.91:8159/;"; 

     switch(state) { 
       case 0: 
         player.src = src; 
         player.load(); 
         player.play(); 
         link.innerHTML = 'Pause'; 
         player_state = 1; 
         break; 
       case 1: 
         player.pause(); 
         player.currentTime = 0; 
         player.src = ''; 
         link.innerHTML = 'Play'; 
         player_state = 0; 
         break; 
     } 
}

原來，剛剛清除currentTime的不剪的Chrome下，需要清除源也並加載回。希望這有助於。

來源

2015-04-08 09:07:28

這是我做的stop（）方法的方式：

某處代碼：

audioCh1: document.createElement("audio");

，然後停止（）：

this.audioCh1.pause() 
this.audioCh1.src = 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAVFYAAFRWAAABAAgAZGF0YQAAAAA=';

這樣，我們don`不會產生額外的請求，舊的被取消，我們的音頻元素處於清潔狀態（在Chrome和FF中測試）：>

來源

2015-04-12 11:49:55 MrHetii

I相信最好檢查音頻是否正在播放狀態並重置currentTime屬性。

if (sound.currentTime !== 0 && (sound.currentTime > 0 && sound.currentTime < sound.duration) { 
    sound.currentTime = 0; 
} 
sound.play();

來源

2016-04-21 19:18:01 NoviceLearner

此方法效果：

audio.pause(); 
audio.currentTime = 0;

但是，如果你不想在每次停止播放音頻時的這兩行代碼來寫，你可以做兩件事情之一。第二個我認爲是更合適的，我不確定爲什麼「JavaScript標準的衆神」沒有制定這個標準。

第一種方法：創建一個函數並通過音頻

function stopAudio(audio) { 
    audio.pause(); 
    audio.currentTime = 0; 
} 

//then using it: 
stopAudio(audio);

第二種方法（看好）：擴展音頻類：

Audio.prototype.stop = function() { 
    this.pause(); 
    this.currentTime = 0; 
};

我有這個JavaScript文件我在任何將處理音頻的腳本之前調用了包含在我的html中的「AudioPlus.js」。

然後，你可以調用停止功能的音頻對象：

audio.stop();

FINALLY CHROME發出帶有「canplaythrough」：

我還沒有在所有的瀏覽器測試了這個，但是這是一個問題，我在Chrome中遇到過。如果您嘗試在連接了「canplaythrough」事件偵聽器的音頻上設置currentTime，那麼您將再次觸發該事件，這可能會導致不良結果。

因此，類似於所有附加事件偵聽器的情況下，您確實不會再次觸發它的解決方案是在第一次調用後刪除事件偵聽器。事情是這樣的：

//note using jquery to attach the event. You can use plain javascript as well of course. 
$(audio).on("canplaythrough", function() { 
    $(this).off("canplaythrough"); 

    // rest of the code ... 
});

獎金：

注意，您可以添加更多的自定義方法的音頻類（或與此有關的任何本地JavaScript類）。

例如，如果你想要一個「重啓」方法重新啓動音頻它可能看起來像：

Audio.prototype.restart= function() { 
    this.pause(); 
    this.currentTime = 0; 
    this.play(); 
};

來源

2017-01-01 08:24:08 Zuks

'function stopAudio（audio）{ audio.pause（）; this.audioStream.src =「」; }' 這樣做最終爲我工作，並刪除了在瀏覽器中播放音頻時出現的Chrome瀏覽器中的揚聲器圖標。在Chrome版本59.0.3071.109上測試過 – lasec0203 2017-06-26 21:40:11

我的代碼工作正常。（IE10 +）

var Wmp = document.getElementById("MediaPlayer");     
    Wmp.controls.stop(); 

<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" 
    standby="Loading áudio..." style="width: 100%; height: 170px" id="MediaPlayer">...

希望得到這個幫助。

來源

2017-02-02 14:00:05

我喜歡做的使用Angular2完全卸下控制然後在下一首歌曲有一個音頻路徑它的重載：當我想卸載它在代碼

<audio id="audioplayer" *ngIf="song?.audio_path">

那麼我這樣做：

this.song = Object.assign({},this.song,{audio_path: null});

當下一首歌曲分配，控制得到完全從頭開始重建：

this.song = this.songOnDeck;

來源

2017-02-11 17:27:02 Helzgate

解決此錯誤的簡單方法是捕獲錯誤。

audioElement.play（）返回一個承諾，所以用.catch（下面的代碼）應該足夠了管理這個問題：

function playSound(sound) { 
 
    sfx.pause(); 
 
    sfx.currentTime = 0; 
 
    sfx.src = sound; 
 
    sfx.play().catch(e => e); 
 
}

注意：您可能需要更換帶有匿名功能的箭頭功能用於向後兼容。

來源

2017-04-11 19:29:13

我有同樣的問題。如果是收音機，停止應該停止播放並播放live。所有的解決方案，我看到有一個缺點：

player.currentTime = 0繼續下載流。
player.src = ''提高error事件

我的解決辦法：

var player = document.getElementById('radio'); 
player.pause(); 
player.src = player.src;

和HTML

<audio src="http://radio-stream" id="radio" class="hidden" preload="none"></audio>

來源

2017-09-12 09:37:19 Mikel

HTML5音頻停止功能

回答

相關問題