Question

是否有全局方法可以检测音频播放时间或开始在浏览器中播放。

类似于if(window.mediaPlaying()){...

的想法

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

Answer 1

没有人可以使用它，但是它可以工作。

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

从那里可以将MediaStream输入到AnyalizerNode中，该Only works in Chrome and maybe Edge可用于检查音频音量是否大于零。

JSFiddle（仅在Linux上的Chrome 80中经过测试）

Feature Policies和<video>，<audio>和YouTube！

重要的代码段（由于代码段iframe中的Demo on dbfiddle而无法发布到有效的代码段中）：

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));

Answer 2

真的，我进行了很多搜索，并阅读了关于Web Audio API的所有 MDN 文档，但是在窗口上找不到任何显示音频播放的全局标志，但是我无论是 iframe 还是视频，都可以通过一种棘手的方式显示 ANY 音频播放，但是有关 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标志，我们可以在浏览器中检测到播放情况。

Answer 3

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

可能就像在“audio”标签中添加一个事件监听器一样？如果我没记错的话，音频标签有一个“暂停”属性...... 而现在我只记得音频已经“暂停”属性......

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

我在五秒前找到它jaja

Answer 4

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

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

Answer 5

如何将事件添加到页面上的所有音频播放器？（未经测试）

function AudioIsPlaying() {
    console.log('Audio is playing');

    // your code here
}

let audioElements = document.getElementsByTagName('audio');
for (let i = 0; i < audioElements.length; i++) {
    audioElements[i].onplaying = (element) => {
        AudioIsPlaying();
    }
}

正在播放的规范：https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event

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

5 个答案: