Detect Supported Audio Formats with JavaScript

By  on  

As streaming becomes our main entertainment source and vendors fight to create the best video format, it's going to be more and more important that we detect device and browser video support before posting videos on our websites.  We think less about audio but the same principle applies:  detect whether or not a given audio format is supported before using it.  So how do we detect if a given audio type is supported?

We can detect audio format support with HTMLAudioElement.prototype.canPlayType, the same strategy that's used with video:

// Create an audio element so we can use the canPlayType method
const audio = document.createElement('audio');

// Does the device support mp3?
audio.canPlayType('audio/mpeg'); // "probably"

There are three possible results from canPlayType:

  • "probably" : The media type appears to be playable
  • "maybe": Cannot tell if the media type is playable without playing it
  • "": The media type is not playable

We can create a function much like my supportsVideoType function to make audio detection easy:

function supportsAudioType(type) {
  let audio;

  // Allow user to create shortcuts, i.e. just "mp3"
  let formats = {
    mp3: 'audio/mpeg',
    mp4: 'audio/mp4',
    aif: 'audio/x-aiff'
  };

  if(!audio) {
    audio = document.createElement('audio')
  }

  return audio.canPlayType(formats[type] || type);
}

// Usage
if(supportsVideoType('mp3') === "probably") {
  // Set the video to mp3
}
else {
  // Set the video to wav or other format
}

Taking the time to detect edge audio and video formats is well worth it, allowing you to deliver clearer media with better compression to improve load time.  Keep these JavaScript functions in mind for your large or small media site!

Recent Features

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • By
    Save Text Size Preference Using MooTools 1.2

    Last time posting here I taught you how to change text-size with JavaScript. The problem with using the solution I presented as Ian Lloyd pointed out: Increase the font size, follow a link to another web page on same site and … back...

  • By
    Redacted Font

    Back when I created client websites, one of the many things that frustrated me was the initial design handoff.  It would always go like this: Work hard to incorporate client's ideas, dream up awesome design. Create said design, using Lorem Ipsum text Send initial design concept to the client...

Discussion

  1. Sam Dutton

    Nice article!

    For what it’s worth, I have a demo of

    canPlayType()

    at simpl.info/cpt.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!