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

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

有什么建议吗?


当前回答

对我来说,代码工作得很好。的问世(+)

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">...

希望这对你有所帮助。

其他回答

我在寻找一些类似的东西,因为制作一个应用程序,可以用来图层彼此的声音聚焦。我最终做的是-当选择一个声音时,用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();

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

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

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

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

这有什么问题吗?

audio.load()

如规范和MDN中所述:

此元素之前播放的任何媒体资源的回放停止。

调用load()将中止所有涉及该媒体元素的正在进行的操作

这个方法有效:

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>