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
"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") else
6 Things You Didn’t Know About Firefox OS
CSS vs. JS Animation: Which is Faster?
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
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…