10 awesome HTML5 audio players

by Jean. 22 Comments -

Among other great features, the new HTML5 specification allow native audio streaming. In this article, I have compiled the 10 most awesome HTML5 audio players available today.

Media Element


MediaElement is an audio an video player which is written in pure HTML5 and CSS. Older browsers are supported by Custom Flash and Silverlight players that mimic the HTML5 MediaElement API.
Media Element is skinnable, and offers plugins for popular platforms such as WordPress, Drupal, Joomla, etc.

→ Visit http://mediaelementjs.com/

Scott Andrew’s HTML5 audio player


This player is very minimalist but works well. Great to use when you do not need playlists or any fancy effects!

→ Visit http://www.scottandrew.com/pub/html5audioplayer/

Speakker


Here is a great player, probably my favorite from the whole list. Speakker is super easy to set up and comes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors, etc…
Speakker is cross-browser compatible and have a Flash fallback for old browsers.
and two different button sets for light and dark themes.

→ Visit http://www.speakker.com/

MooTools HTML5 Audio Player


Are you using Mootools on your website? If yes, you’ll probably enjoy this player, made with HTML5 and the Mootools JavaScript framework. The player works perfectly on all recent browsers.

→ Visit http://simulacre.org/mootools-html5-audio-player/

Universal HTML5 Audio Player


This player is the only one from the list which isn’t free. But it’s cheap ($5 only!) and works well. It have lots of useful features, such as a way to protect your audio from being hijacked by using a beep overlay, which is a great solution for commercial uses.

→ Visit http://codecanyon.net/item/universal-html5-audio-player

SoundManager 2


Using HTML5 and Flash, SoundManager 2 provides reliable cross-platform audio under a single lightweight (10 kb) JavaScript API.
Want to see what you can do with Sound Manager 2? Then visit http://wheelsofsteel.net/ for an awesome demo!

→ Visit http://www.schillmania.com/projects/soundmanager2/

jplayer


jplayer is a jQuery plugin which have been my audio player of choice for several months because of its simplicity. A great tool which can also play videos.

→ Visit http://jplayer.org/

audio.js


audio.js is a drop-in javascript library that allows HTML5′s <audio> tag to be used anywhere. It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.

→ Visit http://kolber.github.com/audiojs/

HTML5 Audio Player Bookmarklet


This bookmarklet adds an audio player to play linked audio files on any page. It can be used on any page which has links to downloadable audio files. A great tool to stream audio instead of downloading!

→ Visit http://marklets.com/HTML5+Audio+Player.aspx

  • Jonathan Smith

    I know it’s possible to have an audio equalizer via HTML5′s audio tag (I’ve seen _ugly_ examples) do you know of any pretty equalizers?

    Great article, I like the Speakker one the most, I’ll deffo try to use that with my latest project.

    • http://www.wprecipes.com Jean-Baptiste Jung

      No, I don’t :( If you find something, I’ll be interested to see it!

      • Jonathan Smith

        http://chromium.googlecode.com/svn/trunk/samples/audio/samples.html

        Found a lot of them there! :)

  • http://francoisrigal.com/ François

    Simurai Zen Player not awes0me?

  • http://pchealthadvisorreview.info Charles

    I think Media Element is definitely one of the best audio/video players. I have had good success with it in the past

  • http://www.eBizROI.com/ Rick Noel

    Awesome list Jean-Baptiste. That is great that all but one freeware options and $5 is reasonable for the one pay option. I am excited to experiment with html5 enabled audio players and will be testing many of these options in current and future web development projects. I come back and reply to this comment if/when I come across an option with a graphic equalizer built in as I love to fine tune audio!

  • Issy

    JW Player is also a great audio/video player. He started with flash, but now he has also great HTML5 support.

  • http://rolling-webdesign.com Theo

    Thanks for the great and useful list!

  • Gwen

    Speakker isn’t cross-browser! Doesn’t work under Chrome. Neither html5 player nor Flash fallback player…
    Thanks for the list though.
    Gwen

  • http://facebook.com/rawfare Attila

    What about the Soundcloud HTML5 widget? Finally works and has big backers behind it.
    http://blog.soundcloud.com/2012/01/26/html5-widget/

  • http://amyself.com Makarand

    Thanks for the great audio players will use it in my next projects !

  • http://www.spanishvilla.com Vincent

    Would it be possible to use any of these in a way that allows users to play music consistently in the background while browsing a website?

  • http://ChiefAlchemist.com Mark Simchock

    Does anyone know if any of these can be used to stream audio off of Dropbox?

    • Juha Metsäkallas

      While technically you can point your audioplayer to play sounds stored in your Dropbox via a public link, it might be against the terms of use of Dropbox. For proof-of-consept and very low traffic sites, it is ok, but as Dropbox is not a streaming service, high volume streaming is not proper use of their service.

      Dropbox has a help page where their terms of use are explained in layman’s language, read it.

  • http://www.speakker.com ckal

    @Gwen there was a major bug in Speakker but has been fixed. So, yeah, it´s cross browser – again.

  • http://amyself.com makarand

    Awesome music player…gonna use most of them.thankss

  • http://html5.svnlabs.com/ Sandeep Verma

    HTML5 MP3 Player with Playlist have HTML5 audio the element enable native audio playback within the browser. It supports all browsers i.e. iOS, Android, Firefox, Chrome, Safari, IE and Opera.

  • http://www.royaltyfreeaudiologo.com Jan

    Thank you for this post since we are using the audio player on our website and it is the core part of our service.

  • http://www.pixelitte.com Ankita Maskara

    Amazing…thanks a lot for help.. :)

  • http://zoomclock.com Paul Valkama

    Nice list! Here’s an addition … ZoomClock.com is a free web-based Player that adds graphics, links and interactivity.

  • http://www.kelleythompson.com Kelley Thompson

    I guess it’s just me, but I can’t see or hear the demo in my browser of choice (Chrome)… :(

  • Sajjad Ashraf

    If you are looking for a full solution with playlist support here is another HTML5 Audio Player With Playlist Support