I am creating a custom controller for MP4 video on a web page. The controller includes a volume slider. Some of the videos that are to be played have no sound track. It would be good to disable the volume slider for these videos, so that the user is not confused when changing the position of the volume slider has no effect.

Is there a property or a trick for checking if an MP4 file has an audio track? (jQuery is an option).

Edit: using @dandavis's suggestion, I now have this solution for Chrome (and .ogg on Opera):

var video = document.getElementById("video")
var volume = document.getElementById("volume-slider")

function initializeVolume() {
  var enableVolume = true
  var delay = 1

  if (video.webkitAudioDecodedByteCount !== undefined) {
    // On Chrome, we can check if there is audio. Disable the volume
    // control by default, and reenable it as soon as a non-zero value
    // for webkitAudioDecodedByteCount is detected.
    enableVolume = false

    startTimeout()

    function startTimeout () {
      if (!!video.webkitAudioDecodedByteCount) {
        enableVolume = true
        toggleVolumeEnabled(enableVolume)
      } else {
        // Keep trying for 2 seconds
        if (delay < 2048) {
          setTimeout(startTimeout, delay)
          delay = delay * 2
        }
      }
    }
  }

  toggleVolumeEnabled(enableVolume)
}


function toggleVolumeEnabled(enableVolume) {
  volume.disabled = !enableVolume
}

The video.webkitAudioDecodedByteCount value is initially 0. In my tests, it may take up to 256ms to get populated with a non-zero value, so I have included a timeout to keep checking (for a while).

I am creating a custom controller for MP4 video on a web page. The controller includes a volume slider. Some of the videos that are to be played have no sound track. It would be good to disable the volume slider for these videos, so that the user is not confused when changing the position of the volume slider has no effect.

Is there a property or a trick for checking if an MP4 file has an audio track? (jQuery is an option).

Edit: using @dandavis's suggestion, I now have this solution for Chrome (and .ogg on Opera):

var video = document.getElementById("video")
var volume = document.getElementById("volume-slider")

function initializeVolume() {
  var enableVolume = true
  var delay = 1

  if (video.webkitAudioDecodedByteCount !== undefined) {
    // On Chrome, we can check if there is audio. Disable the volume
    // control by default, and reenable it as soon as a non-zero value
    // for webkitAudioDecodedByteCount is detected.
    enableVolume = false

    startTimeout()

    function startTimeout () {
      if (!!video.webkitAudioDecodedByteCount) {
        enableVolume = true
        toggleVolumeEnabled(enableVolume)
      } else {
        // Keep trying for 2 seconds
        if (delay < 2048) {
          setTimeout(startTimeout, delay)
          delay = delay * 2
        }
      }
    }
  }

  toggleVolumeEnabled(enableVolume)
}


function toggleVolumeEnabled(enableVolume) {
  volume.disabled = !enableVolume
}

The video.webkitAudioDecodedByteCount value is initially 0. In my tests, it may take up to 256ms to get populated with a non-zero value, so I have included a timeout to keep checking (for a while).

• javascript
• video

• That depends, would a solution using the Web Audio API work, which is only supported in newer browsers, and not at all in IE as far as I know. – adeneo Commented Jun 2, 2015 at 19:21
• In the browsers that support it (not IE), you could use the video as a source for the Web Audio API and check for sound with an OfflineAudioContext. I don't know enough about the particulars of the API to craft a solution, though. – apsillers Commented Jun 2, 2015 at 19:22
• Web Audio API sounds like a solution for many users, yes. – James Newton Commented Jun 2, 2015 at 19:24
• 1 !!video.webkitAudioDecodedByteCount for one browser... – dandavis Commented Jun 2, 2015 at 19:44
• Does this answer your question? HTML5 video, how to detect when there is no audio track? – idmean Commented Jul 14, 2022 at 13:59

2 Answers 2

There might be a better way of doing this, although it's fairly simple just using regular javascript for webkit or mozilla enabled browsers. webkit utilizes this.audioTracks and mozilla uses this.mozHasAudio respectively:

document.getElementById("video").addEventListener("loadeddata", function() {
  if ('WebkitAppearance' in document.documentElement.style)
    var hasAudioTrack = this.audioTracks.length;
  else if (this.mozHasAudio)
    var hasAudioTrack = 1;
  if (hasAudioTrack > 0)
    alert("audio track detected");
  else
    alert("audio track not detected");
});

<video id="video" width="320" height="240" controls>
  <source src="http://media.w3/2010/05/video/movie_300.mp4" type="video/mp4">
</video>

_{There's also a function this.webkitAudioDecodedByteCount, however, I've never had any luck making it work.}

There are different ways to check whether a video file has audio or not, one of which is to use mozHasAudio, video.webkitAudioDecodedByteCount and video.audioTracks?.length properties of video, clean and simple...