How to detect HTML5 audio MP3 support

To detect HTML5 audio MP3 support, use the Modernizr library. Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user's browser.

As stated in the official specification, Modernizr provides comprehensive feature detection capabilities for modern web technologies.

For detecting HTML5 audio MP3 support, you can also check the User-Agent to detect which browser is used, though this method is less reliable than feature detection.

JavaScript Detection Method

You can use JavaScript to test HTML5 audio MP3 support directly ?

function canPlayMP3() {
    var audio = document.createElement('audio');
    return !!(audio.canPlayType && audio.canPlayType('audio/mpeg;').replace(/no/, ''));
}

// Test the function
console.log("MP3 support: " + canPlayMP3());

The output of the above code is ?

MP3 support: true

How It Works

The canPlayType() method returns a string indicating how confident the browser is that it can play the specified media type. The method returns:

• "probably" - Browser is confident it can play the format
• "maybe" - Browser might be able to play the format
• "" (empty string) - Browser cannot play the format

By using .replace(/no/, ''), we remove any "no" responses and convert the result to a boolean using the double negation !! operator.

Conclusion

Detecting HTML5 audio MP3 support can be achieved through JavaScript's canPlayType() method or by using the Modernizr library for more comprehensive feature detection.