检测未添加到 DOM 的音频元素

Posted 2023-03-05

【中文标题】检测未添加到 DOM 的音频元素

【英文标题】：Detect audio element not added to DOM

【发布时间】：2017-05-21 17:48:49

【问题描述】：

我想知道如何在播放前检测到未添加到 DOM 的“音频”元素。创建元素的代码是：

var snd = new Audio("short.mp3");
snd.volume = 1;
snd.play();

音频源可能会改变。

稍后我将在所选选项卡声音时使用Chrome扩展将一些JS注入页面。然后代码应该运行并使用音频源执行 console.log。

如何检查从未添加到 DOM 中的有关此元素的内容？

PS：我无法更改播放音频的代码。

【问题讨论】：

可以覆盖音频构造函数。

你能多说一些吗？

***.com/a/12096099/3591628

【参考方案1】：

编辑： 稍后发现：This answer by PhilHoy 与我的完全一样，无需向音频原型添加其他功能。写这篇文章时对apply不够熟悉，但想法是一样的。

---

详细阐述 Daniel Herr 的评论：

您可以覆盖音频构造函数

在网上查了一下，找不到比这更好的答案了。 You said, "...when the selected tab is audible. Then the code should run..." so I elected to overwrite the play method instead.本质上，我只是：

保存对原始play 方法的引用 将其替换为记录日志的函数 调用保存的引用并传递任何参数 返回结果

Audio.prototype.overwrite_play = Audio.prototype.play

Audio.prototype.play = function()  
  console.log(this.src)
  return this.overwrite_play(arguments); 

如果您将play 分配给任意变量，则会收到以下错误：'play' called on an object that does not implement interface htmlMediaElement.

所以我选择将overwrite_play 方法添加到Audio 本身的原型中。这给了我一个this，它无论如何都引用了特定的Audio 对象，所以我可以直接使用this.src。唯一的问题是我很确定这仅适用于通过new Audio 创建的音频源，而不是嵌入的 HTML 音频元素。

可能有更简洁的方法来处理这个问题，但它似乎适用于我的一个用例（向特定选项卡添加音量滑块）。