HTML5音频停止功能

Question

我点击导航中的每个链接播放一个小音频剪辑

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的Audio API中没有直接的事件

我尝试了下面的代码,但它没有用

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

有什么建议吗？

Answer 1

而不是stop()你可以尝试:

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

这应该具有预期的效果

Answer 2

首先,您必须为音频元素设置ID

在你的js:

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

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

ply.src = "";//停止播放器你必须用什么都替换源

Answer 3

这是我做stop()方法的方法:

代码中的某处:

audioCh1: document.createElement("audio");

然后在stop()中:

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

通过这种方式,我们不会产生额外的请求,旧的请求被取消,我们的音频元素处于干净状态(在Chrome和FF中测试):>

Answer 4

这种方法有效：

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;
};

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

然后你可以在音频对象上调用 stop 函数：

audio.stop();

最后是“canplaythrough”的 Chrome 问题：

我没有在所有浏览器中测试过这个，但这是我在 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 类（或任何与此相关的本机 javascript 类）添加更多自定义方法。

例如，如果您想要一个重新启动音频的“重新启动”方法，它可能如下所示：

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

Answer 5

我有同样的问题。如果是广播电台，则应停止播放，并继续播放直播。我看到的所有解决方案都有一个缺点：

• 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>

Answer 6

有时在 chrome 中不起作用，

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

就这样改变吧

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

Answer 7

从我自己的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;
        }
}

事实证明,只需清除当前时间并不会在Chrome下切断它,需要清除源并重新加载它.希望这会有所帮助.