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

【问题标题】：Detect if <iframe> is playing audio检测 <iframe> 是否正在播放音频
【发布时间】：2020-03-17 14:37:47
【问题描述】：

问题

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

理想情况下，<iframe> 播放音频的“音量”有多高，但这是可选的。

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

我的具体用例

我是https://www.timer-tab.com/ 的开发者，时间到了，YouTube 视频就会开始播放。 YouTube 视频正在<iframe> 中播放。我想知道 YouTube <iframe> 是否发出任何声音。如果它不发出任何声音，则使用 Web Audio API 播放回退声音。（YouTube <iframe> 有时不会发出声音。例如，当用户将其 YouTube 音量设置为静音时。不幸的是，postMessageYouTube <iframe> 无法获取该信息。）

这不是重复的；我的问题专门询问<iframe> 音频检测，而相关问题要求所有音频 检测。

【问题讨论】：

可以自己控制音量吗？如果您控制嵌入它的方式，则可以。

标签： javascript web audio iframe web-deployment

【解决方案1】：

除非 API 允许。出于安全原因，您不能。

【讨论】：

这是正确答案。唯一可行的方法是，如果 iframe 的内容使用其内置的分析器节点运行自己的 Web 音频图，然后通过 postMessage 或类似的方式中继到另一个框架。

【解决方案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);
  }
}

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

请注意，此 sn-p 将无法在 StackOverflow 上正常运行，因为它不允许 iframe 元素。我在本地对其进行了测试，但它确实有效。

您可以在文档 (YouTube Player API Reference for iframe Embeds) 中找到更多信息，例如配置属性和所有可用功能。

【讨论】：