检测 <iframe> 是否正在播放音频

Question

问题

我想知道嵌入在我的网站中的<iframe>是否在播放音频。

理想情况下，我还想知道<iframe>播放音频的“响度”，但这是可选的。

请注意，由于<iframe>不在同一来源，因此检查<iframe>不是一个选项。

我的具体用例

我是https://www.timer-tab.com/的开发者，在时间到期时，YouTube视频开始播放。该视频以<iframe>形式播放。我想知道YouTube的<iframe>是否发出任何声音。如果没有发出任何声音，则使用Web Audio API播放回退声音。（ YouTube 的<iframe>有时不会发出声音，例如，当用户将他的 YouTube 音量设置为静音时。遗憾的是，无法通过 postMessage 向 YouTube 的<iframe> 获取该信息。）

相关问题

在浏览器 JavaScript 中检测是否正在播放音频。

这不是重复的问题。我的问题具体询问<iframe>音频检测，而相关问题则询问所有音频检测。

- brillout

---

你可以控制嵌入的方式，从而自己来控制音量，这是可行的选择吗？ - Dan Ovidiu Boncut

Answer 1

除非API允许，出于安全原因，您无法这样做。

- Camille

---

这是正确的答案。唯一可能的方式是，如果 iframe 的内容正在运行自己的 Web Audio 图形，具有内置的分析器节点，然后通过 postMessage 或类似方式中继到其他帧。 - Brad

Answer 2

这可能无法回答您的标题问题（我甚至认为这是不可能的），但它可能会解决您的潜在问题。您可以使用YouTube的JavaScript API来检测音频是否已静音，或者如果需要，取消静音：

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('ytplayer', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  event.target.playVideo();
}

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING) {
    console.log("isMuted = " + event.target.isMuted());
    event.target.unMute();
    event.target.setVolume(100);
  }
}

<iframe id="ytplayer" type="text/html" src="https://www.youtube.com/embed/dQw4w9WgXcQ?controls=0&showinfo=0&rel=0&enablejsapi=1" frameborder="0"></iframe>

请注意，此代码片段在StackOverflow上无法正常运行，因为它不允许iframe元素。但我在本地测试过，可以正常工作。

您可以在文档中（YouTube Player API Reference for iframe Embeds）找到更多信息，例如配置属性和所有可用的函数。

- Toribio