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

Question

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

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

音频源可能会改变。

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

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

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

Answer 1

编辑:后来发现:This answer by PhilHoy在没有向音频原型(prototype)添加其他功能的情况下完全按照我的方式进行。对 apply 不够熟悉当我写这篇文章时，想法是一样的。

详细阐述 Daniel Herr 的评论:

You can overwrite the audio constructor

在网上查了一会儿，我找不到比这更好的答案了。 You said, "...when the selected tab is audible. Then the code should run..."so I elected to overwrite the 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的原型(prototype)本身。这给了我一个 this指的是特定的Audio无论如何，我可以使用 this.src直接地。唯一的问题是我很确定这仅适用于通过 new Audio 创建的音频源。 & 不嵌入 HTML 音频元素。
可能有更简洁的方法来处理这个问题，但它似乎适用于我的一个用例(将音量 slider 添加到特定选项卡)。