检测未添加到DOM

Question

我想知道我如何能够检测到音频＆＃39;播放前未添加到DOM的元素。创建元素的代码是：

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

音频源可能会改变。

稍后，当选定的选项卡可以听到时，我会使用chrome扩展名将一些JS注入页面。然后代码应该运行并使用音频源执行console.log。

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

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

Answer 1

阐述丹尼尔·赫尔的评论：

您可以覆盖音频构造函数

在网上闲逛了一会儿，我找不到比这更好的答案了。你说，“......当所选择的选项卡可闻，然后代码应运行......”，所以我当选覆盖play方法来代替。本质上，我只是：

• 保存对原始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音频元素。

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