HTML5 video, how to detect when there is no audio track?

Question

I'm making a chrome app and I'd like to have custom controls for the video playback but I'm having some difficulties with the mute button. Most of the videos that will be played in the app are silent so I'd like to be able to disable the button when there is no audio track just like chrome does with the default controls.

Tried using the volume value but it returns "1" even though there's no audio track. Checking if the video is muted didn't work either.

Here's a snippet.

Any suggestions?

Answer 1

Shorter function based on upuoth's answer and extended to support IE10+

function hasAudio (video) {
    return video.mozHasAudio ||
    Boolean(video.webkitAudioDecodedByteCount) ||
    Boolean(video.audioTracks && video.audioTracks.length);
}

Usage:

var video = document.querySelector('video');
if(hasAudio(video)) {
    console.log("video has audio");
} else{
    console.log("video doesn't have audio");
}

Answer 2

At some point, browsers might start implementing the audioTracks property. For now, you can use webkitAudioDecodedByteCount for webkit, and mozHasAudio for firefox.

document.getElementById("video").addEventListener("loadeddata", function() {
  if (typeof this.webkitAudioDecodedByteCount !== "undefined") {
    // non-zero if video has audio track
    if (this.webkitAudioDecodedByteCount > 0)
      console.log("video has audio");
    else
      console.log("video doesn't have audio");
  }
  else if (typeof this.mozHasAudio !== "undefined") {
    // true if video has audio track
    if (this.mozHasAudio)
      console.log("video has audio");
    else
      console.log("video doesn't have audio");
  }
  else
    console.log("can't tell if video has audio");
});