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>

到目前为止，它运作良好

问题是当一个声音剪辑已经运行，我点击任何链接都不会发生任何事情。

我试图在点击链接时停止已经播放的声音，但在HTML5的音频API中没有直接的事件

我尝试了以下代码，但不起作用

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

有什么建议吗？

您可以尝试以下方法，而不是

stop（）

：

sound.pause（）；
sound.currentTime=0；

---

这应该达到预期效果。

首先，您必须为音频元素设置一个id

在您的js中：

var ply=document.getElementById（'player'）

var oldSrc=ply.src//只是为了记住旧的源代码

ply.src=”“//要停止播放机，您必须将源代码替换为零作为旁注，因为我最近使用的是接受答案中提供的停止方法，根据以下链接：


通过手动设置currentTime，可以在音频元素上触发“canplaythrough”事件。在链接中提到了Firefox，但我在Chrome上手动设置currentTime后遇到了此事件。因此，如果您的行为与此事件相关，您可能会陷入音频循环。
Shamangerge写道：

通过手动设置currentTime，可以在音频元素上触发“canplaythrough”事件

这确实会发生，暂停也会触发
pause
事件，这两种情况都使此技术不适合用作“停止”方法。此外，根据zaki的建议设置
src
，如果启用了
autoplay
，则播放器将尝试将当前页面的URL加载为媒体文件（并且失败），不允许将
src
设置为
null
；它将始终被视为URL。除了销毁播放器对象之外，似乎没有提供“停止”方法的好方法，因此我建议只删除专用的停止按钮，而提供暂停和向后跳按钮-停止按钮不会真正添加任何功能。
这种方法是“蛮力”，但它在假设使用jQuery是“允许”的情况下工作.  用div（此处id为“plHolder”）环绕“player”
标签

从我自己的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下将其删除，还需要清除源代码并将其重新加载。希望这能有所帮助。
以下是我的停止（）方法：

代码中的某个地方：

audioCh1: document.createElement("audio");

然后在stop（）中：

这样我们就不会产生额外的请求，旧的请求被取消，我们的音频元素处于干净状态（在Chrome和FF中测试）：>
我认为最好检查音频是否处于播放状态并重置currentTime属性

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

if（sound.currentTime！==0&&（sound.currentTime>0&&sound.currentTime
此方法有效：

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

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

但是如果你不想每次停止音频时都要写这两行代码，你可以做两件事中的一件。我认为第二件更合适，我不知道为什么“javascript标准之神”没有制定这个标准

第一种方法：创建函数并传递音频

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

//then using it:
stopAudio(audio);

第二种方法（首选）：扩展音频类：

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

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

我把它放在一个名为“AudioPlus.js”的javascript文件中，在任何处理音频的脚本之前，我都会将它包含在html中

然后可以对音频对象调用停止功能：

audio.stop();

最后，CHROME发布了“canplaythrough”：

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

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

我没有在所有浏览器中测试过这一点，但这是我在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 ...
});

奖金：

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

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

请注意，您可以向Audio类（或任何本机javascript类）添加更多自定义方法

例如，如果您想要一个重新启动音频的“restart”方法，它可能看起来像：

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

对我来说，代码运行良好。（IE10+）

var Wmp=document.getElementById（“MediaPlayer”）；
Wmp.controls.stop（）；
...

希望有帮助。
我喜欢做的是使用Angular2完全删除控件，然后在下一首歌曲有音频路径时重新加载：

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

分配下一首歌曲时，控件将从头开始完全重新创建：

this.song = this.songOnDeck;

绕过此错误的简单方法是捕获错误

audioElement.play（）返回一个承诺，因此以下带有.catch（）的代码应该足以处理此问题：


功能播放声音（声音）{
暂停（）；
sfx.currentTime=0；
sfx.src=声音；
play（）.catch（e=>e）；
}
我也遇到了同样的问题。停止应该会停止流，如果是收音机，则启动播放。我看到的所有解决方案都有一个缺点：


player.currentTime=0
继续下载流
player.src=''
raise
error
event

我的解决方案：

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

还有HTML

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

它有时在chrome中不起作用

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

就这样改变,

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

在IE 11中，我使用了组合变量：

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

仅重复2次可防止IE在pau后继续加载媒体流