banner 728x90

Detect Supported Audio Formats with JavaScript

In Mobile Web Development 54 views
banner 728x90

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) 

// Usage
if(supportsVideoType('mp3') === "probably") 

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!

  • 6 Things You Didn’t Know About Firefox OS

    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla’s finally given web developers the platform that they need to create apps the way they’ve been creating them for years — with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving…

  • CSS vs. JS Animation: Which is Faster?

    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point…

  • jQuery Wookmark

    jQuery Wookmark

    The first thing that hits you when you visit Pinterest is “Whoa, the columns are the same width and the photos are cut to fit just the way they should.”  Basic web users probably think nothing of it but as a developer, I can appreciate the…

  • MooTools History Plugin

    MooTools History Plugin

    One of the reasons I love AJAX technology so much is because it allows us to avoid unnecessary page loads.  Why download the header, footer, and other static data multiple times if that specific data never changes?  It’s a waste of time, processing, and bandwidth.  Unfortunately…

banner 728x90
    Script & Style Show: Episode 4: Tooling
    Script & Style Show: Episode 4: Tooling
    In the episode of this week: David
    Comment Video Player
    Comment Video Player
    Streaming entertainment is a massive interest of

    Leave a reply "Detect Supported Audio Formats with JavaScript"

    Must read×