我正在播放一个小音频剪辑点击每个链接在我的导航
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();
});
有什么建议吗?
当前回答
这个方法有效:
audio.pause();
audio.currentTime = 0;
但如果你不想每次停止音频时都写这两行代码，你可以做以下两件事之一。第二个我认为是更合适的，我不知道为什么“javascript标准之神”没有制定这个标准。
第一种方法:创建一个函数并传递音频
function stopAudio(audio) {
audio.pause();
audio.currentTime = 0;
}
//then using it:
stopAudio(audio);
第二种方法(首选):扩展Audio类:
Audio.prototype.stop = function() {
this.pause();
this.currentTime = 0;
};
我有一个javascript文件，我称之为“AudioPlus.js”，我包括在我的html之前的任何脚本，将处理音频。
然后你可以在音频对象上调用stop函数:
audio.stop();
最后CHROME的问题与“canplaythrough”:
我没有在所有浏览器中测试这个，但这是我在Chrome中遇到的一个问题。如果你尝试在一个音频上设置currentTime，该音频有一个“canplaythrough”事件监听器附加到它，那么你将再次触发该事件，这可能会导致不期望的结果。
因此，解决方案是在第一次调用之后删除事件侦听器，这与附加了一个事件侦听器并且确实希望确保它不会再次触发的所有情况类似。就像这样:
//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 ...
});
奖金:
请注意，您可以向Audio类(或任何本地javascript类)添加更多自定义方法。
例如，如果你想要一个“restart”方法重新启动音频，它可以是这样的:
Audio.prototype.restart= function() {
this.pause();
this.currentTime = 0;
this.play();
};
其他回答
我也有同样的问题。如果它是一台收音机，停止应该停止流和播放去直播。我看到的所有解决方案都有一个缺点:
的球员。currentTime = 0继续下载流。 的球员。SRC = "引发错误事件。
我的解决方案:
var player = document.getElementById('radio');
player.pause();
player.src = player.src;
还有HTML
<audio src="http://radio-stream" id="radio" class="hidden" preload="none"></audio>
如果你的网站上有几个音频播放器，你想暂停它们:
$('audio').each( function() {
$(this)[0].pause();
});
我相信检查音频是否处于播放状态并重置currentTime属性会很好。
if (sound.currentTime !== 0 && (sound.currentTime > 0 && sound.currentTime < sound.duration) {
sound.currentTime = 0;
}
sound.play();
而不是stop()，你可以尝试:
sound.pause();
sound.currentTime = 0;
这应该会有预期的效果。
对我来说，代码工作得很好。的问世(+)
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">...
希望这对你有所帮助。
