Detect if audio is playing in browser Javascript

Question

Is there a global way to detect when audio is playing or starts playing in the browser.

something like along the idea of if(window.mediaPlaying()){...

without having the code tied to a specific element?

EDIT: What's important here is to be able to detect ANY audio no matter where the audio comes from. Whether it comes from an iframe, a video, the Web Audio API, etc.

Answer 1

No one should use this but it works.

Basically the only way that I found to access the entire window's audio is using MediaDevices.getDisplayMedia().

From there a MediaStream can be fed into an AnyalizerNode that can be used to check the if the audio volume is greater than zero.

Only works in Chrome and maybe Edge (Only tested in Chrome 80 on Linux)

JSFiddle with <video>, <audio> and YouTube!

Important bits of code (cannot post in a working snippet because of the Feature Policies on the snippet iframe):

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

Verily, I search a lot and read all MDN docs about Web Audio API but don't find any global flag on window that shows audio playing but I have a tricky way that shows ANY audio playing, no matter an iframe or video but about Web Audio API I'm not sure, the tricky way is:

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

Now, buy the isPlaying flag we can detect playing in the browser.