HTML5 Audio 标签拒绝停止播放，即使被删除？

Posted 2023-02-25

【中文标题】HTML5 Audio 标签拒绝停止播放，即使被删除？

【英文标题】：HTML5 Audio tag refuses to stop playing, even after being removed?

【发布时间】：2014-02-28 16:23:31

【问题描述】：

所以我有这个音频标签：

<audio src=".....mp3" autoplay id="aud"></audio>

20 秒后，我触发了这段代码：

var obj=$('#aud')
obj[0].volume=0;
obj[0].pause();
obj.prop('volume',0);
obj.trigger('pause');
obj.attr('src','');
obj.remove();
console.log('REMOVED!!');

但在这一切之后，音频还在播放？？

音频标签已被obj.remove()成功移除，但音频还在继续。

console.log() 正确记录。我没有错误。但是尽管使用了多种方法来静音、暂停和删除音频标签，但音频仍在继续。

谁能解释一下原因？

我需要用盐和火焰清除此音频。任何帮助将不胜感激，这让我慢慢发疯......

【问题讨论】：

我认为 html 是在报复您使用自动播放媒体

一旦有人点击“播放”按钮，音频标签就会被写入页面。老实说，我不应该受到报应！

应该可以...什么浏览器？ jQuery 版本？也许是一个遇到问题的 jsfiddle？

我知道它应该可以工作，但我无法在 jsFiddle 中重新创建问题 - 这表明它是我的代码，但我需要了解是什么导致音频在播放后继续播放被移除。也许一个更好的问题应该是“在标签被告知静音、暂停和被删除后，音频如何继续播放”——有没有这种情况发生过？我正在检查 DOM，一旦删除，页面中的任何地方都没有其他音频标签。我正在使用 Firefox 28 和 Chrome 25。

您写道，您正在手动将音频标签附加到代码中。我相信即使在您将标签添加到 DOM 之前音频就会自动播放，这会弄乱一些东西（可能会开始播放 2 次？）。尝试在没有 autplay 属性的情况下将音频标签附加到您的 DOM 树，并在添加后简单地调用 play()

【参考方案1】：

所以我在写这个作为答案时摆弄了这个，我得出以下结论：

使用autoplay 属性手动创建audio 标记会导致它在被添加到DOM 树2 次之前播放（在较旧的jquery 实现上）。即使在将该元素添加到 DOM 树之后，通常也无法停止两个音频流 - 可能在播放第二个流时，其中一个流与元素断开连接。没有深入挖掘。我在这里重现了这个问题：

http://jsfiddle.net/2gaBs/3/

当您单击Create w/o autoplay 按钮时，您可以正常暂停它，但是当您单击Create autoplay 时，它会立即启动（甚至在添加到 DOM 树之前）2 次！您可能没有注意到第二次播放（我也没有），因为当 mp3 在同一台机器上时，两个音频流几乎完全同步。按Try stop 将停止其中一个音频流（您需要等待 5 秒，注意 setTimeout）。

另外请注意，如果您将 jQuery ver 切换到 1.8.3 或更高版本，则不再出现此问题，因此那天我们俩似乎都在使用旧的 jQuery 库^^

所以 2 个解决方案是：将 jquery 版本更新到 1.8.3 或更高版本，或者创建没有自动播放属性的元素并稍后启动它。