How to determine if playing HTML5 audio is actually making sound?

Question

For the purposes of a project I am working, I want to find out via the JS console if the <audio> tag found on facebook.com is playing audio or not. (I can then move this code into a Chrome extension and also apply it against other websites such as silent HTML5 ads.)

You can find the element by typing:

$$("audio")[0]

I have used the following code (adapted from this jsfiddle which I found during a search) to show when different event listeners are called:

var audio = $$("audio")[0]; 
var events = 'abort,canplay,canplaythrough,durationchange,emptied,ended,error,loadeddata,loadedmetadata,loadstart,pause,play,playing,progress,ratechange,seeked,seeking,stalled,suspend,timeupdate,volumechange,waiting'.split(',');

// event handler
var onEvent = function(e) {
    console.log(e.type);
};

// add event listener to audio for all events
for (var i = 0, len = events.length; i < len; i++) {
    audio.addEventListener(events[i], onEvent, false);
}

I would then play the audio by typing:

$$("audio")[0].play();

If I check $$("audio")[0].paused, it will show false, but I haven't found any properties or events that would indicate whether it played sound or not. (I wouldn't expect it to here since I don't think it has audio data to play, but if there was a way to check, I could compare that with an audio element that does play sound.)

Also, I have tried sending myself a message from an incognito tab and don't see a trace of this happening. (I assume the audio element gets used for that.)

Help is appreciated.

that's a bit unclear what you ask. Do you only want to know if it is actually playing? If so you just have to check for its paused attribute. (if(!yourAudio.paused)console.log('isPlaying')) and there are dupes. Otherwise, please clarify your question. — Kaiido
I thought I was clear but will happily make edits if there is a better way to express it. I want to know whether or not it is playing sound or ever did play sound (i.e. do I actually hear anything?). I think this statement is the most relevant from my question: "If I check $$("audio")[0].paused, it will show false, but I haven't found any properties or events that would indicate whether it played sound or not." — Jared Sohn
what do you mean by "played sound"? Do you want to check if the media loaded has no sound in it ? (hard but feasible) Do you want to check if it is muted ? (easily checkable) do you want to check if it was already played once at least, whatever its state now ? (easy) — Kaiido
Ps : after looking at your profile page, you've to know that you won't be able to mute all sounds from a webpage : if it comes from flash you're stuck, if the audio element is not appended to the DOM nor accessible through global scope, you're stuck through external iframe, you're stuck, and there are probably other reasons why this would be impossible. — Kaiido
I now see your edited comment, the best solution for this IMO is to check the audioElement.played property which will return a TimeRange. You can then check the length of this TimeRange to know if it was played at least once (if(audioElement.played.length>0){// has been played}) — Kaiido

Kaiido Kaiido · Accepted Answer · 2015-10-20T08:18:07

To check if an HTMLMediaElement (either video or audio) has ever been played on the page, the best solution is to check for its played attribute.

This will return a TimeRanges object that you can as well use to get how much of the media has been played.

If it has never been played, then the length property of this TimeRanges object will be set to 0 :

if(audioElement.played.length){
  // This media has already been played
}else{
  // Never
}

How to determine if playing HTML5 audio is actually making sound?

1 Answers