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

Question

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

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

音频源可能会改变。

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

我如何检查这个从未添加到 DOM 的元素的相关内容？

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

Answer 1

编辑：稍后发现：PhilHoy 的这个答案完全符合我的做法，而无需向音频原型添加其他功能。我写这篇文章的时候还不够熟悉apply，但想法是一样的。

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

您可以覆盖音频构造函数

在网上查了一下，我找不到比这更好的答案。你说，“......当选定的选项卡发出声音时。然后代码应该运行......”所以我选择覆盖该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 音频元素创建的音频源。

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