10 Best HTML5 Audio Players

HTML5 browsers have, in recent years, begun to gain more and more market share. That has made a great deal of developers quite excited, as they can start leaving their cumbersome Flash players for more elegant, faster HTML5 media players. If you’re looking to make the switch, here are ten HTML5 audio players that you can pop on your website in lieu of a Flash player!

1. MediaElement

MediaElement might be the most popular HTML5 player on this list, and for good reasons: it supports both audio and video, it’s written in pure, clean HTML5 and CSS, and it’s highly backward-compatible. It includes custom Flash and Silverlight players that will work with older browsers, and those players are designed to mimic the normal MediaElement player. The player has plugins available for most of the major CMSs like WordPress, Joomla, Drupal and others. It plays well with other custom frameworks due to its ease of modification, and it is easy to extend the framework via JavaScript “feature” plugins.

MediaElement offers extensive customization options – it’s fully skinnable and supports Ambilight, full-screen video, the <track> element, Flash/HTML5 YouTube API, auto translation thanks to Google Translate, and a host of other features.

MediaElement HTML5 Player

[ Link ]

2. Scott Andrew’s HTML5 audio player

This minimalist audio player is light on frills, and if you are looking for bells and whistles it’s not the player for the job. What it is, however, is small and very fast. It’s well suited for low-bandwidth or mobile websites. As an added bonus, Scott Andrew’s HTML5 player is not tied to any particular framework, so it’s easy to drop into a page without the need for extra libraries and dependencies.

Scott Andrew's HTML5 Audio Player

[ Link ]

3. Speakker

Speakker is one of the slickest HTML5 players on the list with an impressive feature set. It comes with different button sets for dark and light themes, unlimited colors and flexible dimensions. Its minimalist look along with good styling gives it a nice Web 2.0 feel. It is a breeze to install and get running, giving you an almost immediate “tinkering” access to all its customizable controls.

The player’s creators describe it as a “cross-browser audio solution featuring HTML5.” You can add in artist information links, links to social media, new themes, and more. You can also use Flash as a fallback with the player, and it supports compatibility for different users. All in all, it is a highly functional player in a small package!


[ Link ]

5. jPlayer

Like MooTools player above it, jPlayer is based on a framework: jQuery. Also much like MooTools, jPlayer offers the power of a framework player: the flexible API that’s familiar to jQuery developers. It is extremely fast and easy to get started with – you can have a functioning deployment running in just a few minutes if you don’t mind the default version. It’s also very small – only about 8KB in size in its gzipped and minified version.

One of jPlayer’s big advantages is its extremely active open source developer community with a wide platform support, free plugins, and comprehensive documentation. If you are looking for a simple, flexible HTML5 player that works with jQuery and has great documentation and community support, then look no further than jPlayer!


[ Link ]

6. Universal HTML5 Audio Player

While this HTML5 audio player isn’t free, at mere $5 it offers a rich set of features. The first and most obvious one is cross-device compatibility – the player has been tested extensively and works on iOS, Android, and desktop browsers.

The player features graceful fallback capabilities and slick interface. You can toggle a circular progress meter that shows time remaining as well as the playback position. The progress meter and the audio buttons offer customizable color and dimensions to fit your theme. Definitely worth a look if you need a smart, inexpensive HTML5 audio player to fit on your mobile-optimized website!

Universal HTML5 Audio Player

[ Link ]

7. SoundManager 2

SoundManager 2 is one of the more customizable products on this list: in its most basic form it’s nothing more than a small HTML5 player that can start and stop a song. With some customization, however, it can be skinned to just about any theme, image, or design imaginable – the screenshot below is a skinned and customized install of SoundManager 2, complete with functioning turntables!

SoundManager 2 Custom

SoundManager 2 is lean – the whole install is only about 11 KB once properly optimized. The API has no external dependencies and is flexible and easy to use, supporting HTML5 audio where appropriate and falling back to Flash gracefully when need be.

SoundManager 2 Setup

[ Link ]

8. audio.js

audio.js is a no-frills player that aims to provide a drop-in functionality anywhere. Once loaded in the browser, you can use tags anywhere in the HTML file – even if the browser isn’t HTML5 enabled, audio.js gracefully falls back to Flash.

audio.js is small, lean, and customizable (to a point), enough that it would serve well as a drop-in to most websites. Mobile sites eespecially will love the small size of this player, and it’s been verified to work across mobile Safari and Chrome, making it attractive for websites aimed at those on the go!

audio.js Player

[ Link ]

9. Codebase HTML5 Music Player

Codebase’s HTML5 player is another entry in the minimalist audio player category, but it does it well: the music player is built entirely in jQuery, and the dedication to the aesthetic shows. The buttons shimmer and move very fluidly, and the entire interface feels very slick. It has some basic functionality that lets you build a playlist and rate the songs on it, as well as the ability to add links to the songs to buy them, and it can be modified to add, for example, artist bios or song lyrics to the songs on the playlist.

It is cross-browser compatible, and it supports Flash fallback, making this another media player ideal for using on mobile devices like Android and iPad.

Codebasehero HTML5 Audio Player

[ Link ]

10. OIPlayer jQuery plugin

OIPlayer is another jQuery based player that comes with a few bells and whistles. It’s easy to implement and use, it supports multiple players on a page allows full screening via HTML5. It can fall back to either Flowplayer or Cortado if a fallback is required. The player and its buttons are skinnable with CSS, and you can place the buttons on top or down below the player.

It’s iOS and Android compatible, and it fires custom events to use for play statistics on any given page. Overall it’s a slick, easy to use plugin for jQuery that deserves a look, eespecially if you are already using jQuery for other functionality.

OIPlayer jQuery plugin

[ Link ]

As more and more browsers are supporting HTML5, HTML5 audio players are a great way to get over the headaches of Flash and ensure you have a player that just works as intended across browsers. Each of the players on this list is well-suited for a different purpose – some are better for mobile, others are more full-features but larger. All of them, however, bring excellence to the table! Try out one of these HTML5 players today and amp up your website with some media!

Subscribe on Youtube

Article By
Michael Dorf is a professional software architect, web developer, an open-source enthusiast, and more recently, a WordPress addict. He has been creating software and teaching courses in Java and J2EE development at LearnComputer.com. Michael blogs about Hadoop, Java, Android, PHP, MySQL, WordPress, and other cutting edge technologies that define today's web. Michael holds a M.S. degree in Software Engineering from San Jose State University, a B.S. degree in Computer Science from San Francisco State University, and a B.A degree in Political Science, Public Service from UC Davis. Michael is a busy father of 3, but when he does have a spare "minute", he enjoys playing a game of Soccer, Ultimate Frisbee, and Volleyball.