我正在播放一个小音频剪辑点击每个链接在我的导航
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();
});
有什么建议吗?
当前回答
这是我做stop()方法的方式:
代码中的某个地方:
audioCh1: document.createElement("audio");
然后在stop()中:
this.audioCh1.pause()
this.audioCh1.src = 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAVFYAAFRWAAABAAgAZGF0YQAAAAA=';
这样我们就不会产生额外的请求，旧的被取消，我们的音频元素处于清洁状态(在Chrome和FF测试):>
其他回答
shamangeorge写道:
手动设置currentTime可以触发音频元素上的canplaythrough事件。
This is indeed what will happen, and pausing will also trigger the pause event, both of which make this technique unsuitable for use as a "stop" method. Moreover, setting the src as suggested by zaki will make the player try to load the current page's URL as a media file (and fail) if autoplay is enabled - setting src to null is not allowed; it will always be treated as a URL. Short of destroying the player object there seems to be no good way of providing a "stop" method, so I would suggest just dropping the dedicated stop button and providing pause and skip back buttons instead - a stop button wouldn't really add any functionality.
我喜欢做的是使用Angular2完全删除控件，然后当下一首歌有音频路径时，它会被重新加载:
<audio id="audioplayer" *ngIf="song?.audio_path">
然后当我想在代码中卸载它时，我这样做:
this.song = Object.assign({},this.song,{audio_path: null});
当下一首歌曲被分配时，控件完全从头开始重新创建:
this.song = this.songOnDeck;
作为旁注，因为我最近使用了在接受的答案中提供的停止方法，根据这个链接:
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
手动设置currentTime可以触发音频元素上的canplaythrough事件。在链接中，它提到了Firefox，但我在Chrome上手动设置currentTime后遇到了这个事件。所以如果你有行为附加到这个事件，你可能会在一个音频循环中结束。
这种方法是“蛮力”的，但前提是“允许”使用jQuery。围绕你的“player”<audio></audio>标签与div(这里与id“plHolder”)。
<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
}
如果你的网站上有几个音频播放器，你想暂停它们:
$('audio').each( function() {
$(this)[0].pause();
});
