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
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    Editable Content Using MooTools 1.2, PHP, and MySQL

    Everybody and their aerobics instructor wants to be able to edit their own website these days. And why wouldn't they? I mean, they have a $500 budget, no HTML/CSS experience, and extraordinary expectations. Enough ranting though. Having a website that allows for...

  • By
    Google Extension Effect with CSS or jQuery or MooTools JavaScript

    Both of the two great browser vendors, Google and Mozilla, have Extensions pages that utilize simple but classy animation effects to enhance the page. One of the extensions used by Google is a basic margin-top animation to switch between two panes: a graphic pane...

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!