html audio自动停止了,HTML5音频停止功能(HTML5 Audio stop function)

最新推荐文章于 2025-03-11 15:20:24 发布

编辑部小李

最新推荐文章于 2025-03-11 15:20:24 发布

阅读量1.7k

点赞数

文章标签： html audio自动停止了

博客讨论了在HTML5中遇到的音频自动停止和切换问题。开发者分享了多种停止音频的方法，如设置currentTime和pause，以及如何防止事件重复触发。解决方案包括暂停、重置时间、更改源以及扩展Audio对象添加自定义的stop方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我玩的每一个环节中点击一个小的音频剪辑在我的导航

HTML代码：

JS代码：

$('#links a').click(function(e) {

e.preventDefault();

var beepOne = $("#beep-one")[0];

beepOne.play();

});

它的正常工作为止。

问题是，当一个声音片段已在运行，我点击任何链接没有任何反应。

我试图阻止对链接的点击已经播放的声音，但在HTML5的音频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");

然后停止()：

this.audioCh1.pause()

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

这样，我们不`吨产生额外的要求，旧的被取消，我们的音频元件处于清洁状态(在Chrome和FF测试)：>

Answer 4:

从我自己的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下，需要清除源也并加载回。希望这有助于。

Answer 5:

此方法效果：

audio.pause();

audio.currentTime = 0;

但是，如果你不希望有写的代码，每次停止音频，你可以做两两件事之一时这两条线路。第二个我觉得是比较合适的一个，我不知道为什么“的JavaScript的标准神仙”还没有做出这个标准。

第一种方法：创建一个功能，并通过声音

function stopAudio(audio) {

audio.pause();

audio.currentTime = 0;

}

//then using it:

stopAudio(audio);

第二种方法(有利的)：扩展音频类：

Audio.prototype.stop = function() {

this.pause();

this.currentTime = 0;

};

我有这个JavaScript文件我称之为“AudioPlus.js”，我包括将要处理音频任何脚本之前我的HTML。

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

audio.stop();

WITH “canplaythrough”终于CHROME问题：

我还没有在所有的浏览器测试了这个，但是这是我在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 ...

});

奖金：

请注意，您甚至可以更多的自定义方法添加到音频类(或与此有关的任何本地JavaScript类)。

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

Audio.prototype.restart= function() {

this.pause();

this.currentTime = 0;

this.play();

};

Answer 6:

作为一个方面说明，并因为我最近使用公认的答案提供的停止方法，根据这个链接：

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

通过设置手动currentTime的一个可以触发音频元素上的“canplaythrough”事件。在链接它提到火狐，但我遇到了这个事件在Chrome手动设置currentTime的后射击。所以，如果你的行为附加到这个事件中，你可能会在一个音频循环结束。

Answer 7:

我有同样的问题。止损应该停止流和onplay去住，如果它是一台收音机。所有的解决方案，我看到有一个缺点：

player.currentTime = 0继续下载该流。

player.src = ''养error事件

我的解决方案：

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

player.pause();

player.src = player.src;

和HTML

Answer 8:

shamangeorge写道：

通过设置手动currentTime的一个可以触发音频元素上的“canplaythrough”事件。

这的确是会发生什么，以及暂停也将触发pause事件，这两者使这一技术不适合用作“停止”的方法。此外，设置src由扎基的建议将让玩家尝试，如果加载当前页面的URL作为媒体文件(失败) autoplay已启用-设置src至null是不允许的; 它将始终被视为一个URL。短销毁选手客体的存在似乎是提供“一站式”的方法没有什么好办法，所以我建议只是删除专用停车按钮，并提供暂停和快退按钮，而不是 - 停止按钮不会真的添加任何功能。

Answer 9:

这种做法是“蛮力”，但它的工作原理假设使用jQuery是“允许”。环绕你的“玩家” 用一个div(这里“plHolder”的ID)标签。

...

然后此javascript应该工作：

function stopAudio() {

var savePlayer = $('#plHolder').html(); // Save player code

$('#player').remove(); // Remove player from DOM

$('#FlHolder').html(savePlayer); // Restore it

}

Answer 10:

它没有在Chrome有时工作，

sound.pause();