检测音频是否在浏览器 Javascript 中播放答案

【问题标题】：Detect if audio is playing in browser Javascript检测音频是否在浏览器 Javascript 中播放
【发布时间】：2015-06-20 09:01:48
【问题描述】：

是否有一种全局方法来检测音频何时在浏览器中播放或开始播放。

类似于if(window.mediaPlaying()){... 的想法

没有将代码绑定到特定元素？

编辑：这里重要的是能够检测到 ANY 音频，无论音频来自何处。无论是来自 iframe、视频、Web Audio API 等。

【问题讨论】：

标签： javascript media-player audio-player

【解决方案1】：

没有人应该使用它，但它确实有效。

基本上，我发现访问整个窗口音频的唯一方法是使用MediaDevices.getDisplayMedia()。

从那里可以将MediaStream 输入AnyalizerNode，用于检查音量是否大于零。

Only works in Chrome and maybe Edge（仅在 Linux 上的 Chrome 80 中测试过）

JSFiddle 与 <video>、<audio> 和 YouTube！

重要的代码位（由于 sn-p iframe 上的Feature Policies，无法在工作的 sn-p 中发布）：

var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();

var bufferLength = analyser.fftSize;
var dataArray = new Float32Array(bufferLength);

window.isAudioPlaying = () => {
  analyser.getFloatTimeDomainData(dataArray);
  for (var i = 0; i < bufferLength; i++) {
    if (dataArray[i] != 0) return true;

  }
  return false;
}

navigator.mediaDevices.getDisplayMedia({
     video: true,
     audio: true
   })
   .then(stream => {
      if (stream.getAudioTracks().length > 0) {
        var source = audioCtx.createMediaStreamSource(stream);
        source.connect(analyser);

        document.body.classList.add('ready');
      } else {
        console.log('Failed to get stream. Audio not shared or browser not supported');
      }

   }).catch(err => console.log("Unable to open capture: ", err));

【讨论】：

很好的解决方案，但不幸的是，这并不总是有效。我已经在 Google Meet 上进行了尝试，以检测是否有人在说话，但消息显示即使没有人说话，也会播放音频。
标签页似乎有一点静电，即使每个人都静音了。我做了一个更新的小提琴，显示了音频的图表。 jsfiddle

【解决方案2】：

确实，我搜索了很多并阅读了所有关于 Web Audio API 的 MDN 文档，但在 window 上没有找到任何显示音频播放的全局标志，但我有一个显示 ANY 音频播放的棘手方式，无论是 iframe 还是 video 但关于 Web Audio API 我是不确定，棘手的方法是：

const allAudio = Array.from( document.querySelectorAll('audio') );
const allVideo = Array.from( document.querySelectorAll('video') );
const isPlaying = [...allAudio, ...allVideo].some(item => !item.paused);

现在，购买isPlaying 标志，我们可以在浏览器中检测到播放。

【讨论】：

几乎肯定这依赖于音频/视频元素成为 DOM 的一部分。我很确定您可以使用 JS 创建音频元素并非常轻松地播放它，而无需将其添加到 DOM；所以这不适用于那种情况。

【解决方案3】：

有一个 playbackState 属性 (https://developer.mozilla.org/en-US/docs/Web/API/MediaSession/playbackState)，但并非所有浏览器都支持它。

if(navigator.mediaSession.playbackState === "playing"){...

【讨论】：

“没有将代码绑定到特定元素”是问题的一个关键方面。（至少对我来说。）
是的，在这种情况下，应首先为元素设置playbackState（默认为"none"），但可以为任何媒体源设置。
如果您无法控制源元素，您可以按照 Ed 的逻辑，在您的文档（音频、视频、iframe）中查找媒体元素，并检查它们是否正在播放音频。跨度>
我得花点时间研究一下。访问 iframe 的文档及其内部 DOM 有一些选项，例如 contentWindow (developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/…) 和 frames (developer.mozilla.org/en-US/docs/Web/API/Window/frames)。我还在 stackoverflow.com/questions/43745161/… 找到了一个相关问题，可能会有所帮助。

【解决方案4】：

我在 Google 中寻找解决方案，但我还没有找到任何东西。也许您可以仅在播放音频时检查一些具有 X 值的数据。如果您有一些按钮开始播放音频文件，也许您可以通过在代表上添加一些事件侦听器来确定音频正在播放。按钮...

也许像在“audio”标签中添加一个事件监听器之类的？如果我没记错的话，音频标签有一个“暂停”属性...... 现在我只记得音频有“暂停”属性......

另外，您可能想查看此主题HTML5 check if audio is playing?

我只是在五秒前找到它jaja

【讨论】：