ShoutMeTech

img

7 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. 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!

jPlayer

[ Link ]

3. 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 ]

4. 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 ]

5. 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 ]

6. 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 ]

7. 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!

Article by Michael Dorf

Michael has written 1 articles.

If you like This post, you can follow shoutmetech on Twitter. Subscribe to shoutmetech feed via RSS or EMAIL to receive instant updates.


Comments on this entry are closed.

  • Sajjad March 8, 2014, 11:32 am

    Here is another free html5 music player http://www.peakplayer.com , i am using this on my personal website 🙂