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

Question

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

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

音频源可能会改变。

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

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

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

Answer 1

编辑：稍后发现： 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本身的原型中。 无论如何，这给了我一个引用特定Audio对象的this ，所以我可以直接使用this.src 。 只有其他问题是我很确定这仅适用于通过new Audio创建的音频源，而不是嵌入的 HTML 音频元素。

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