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

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测试):>

其他回答

从我自己的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下削减它,需要清除源代码,并将其加载回来。希望这能有所帮助。

我在寻找一些类似的东西,因为制作一个应用程序,可以用来图层彼此的声音聚焦。我最终做的是-当选择一个声音时,用Javascript创建音频元素:

                const audio = document.createElement('audio') as HTMLAudioElement;
                audio.src = getSoundURL(clickedTrackId);
                audio.id = `${clickedTrackId}-audio`;
                console.log(audio.id);
                audio.volume = 20/100;
                audio.load();
                audio.play();

然后,附加子文件实际上表面的音频元素

document.body.appendChild(audio);

最后,当取消选择音频时,您可以停止并完全删除音频元素-这也将停止流。

            const audio = document.getElementById(`${clickedTrackId}-audio`) as HTMLAudioElement;
            audio.pause();
            audio.remove();

在IE 11中,我使用了组合变体:

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

只有2次重复可以防止IE在pause()后继续加载媒体流,并因此淹没磁盘。

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

代码中的某个地方:

audioCh1: document.createElement("audio");

然后在stop()中:

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

这样我们就不会产生额外的请求,旧的被取消,我们的音频元素处于清洁状态(在Chrome和FF测试):>

解决这个错误的简单方法是捕获错误。

audioElement.play()返回一个承诺,所以下面带有.catch()的代码应该足以处理这个问题:

函数playSound(声音){ sfx.pause (); 自解压。currentTime = 0; 自解压。SRC =声音; sfx.play()。Catch (e => e); }

注意:为了向后兼容,您可能需要将箭头函数替换为匿名函数。