• X

    10 Best HTML5 Audio Players

    By in Design

    Bluehost hosting

    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 10 Best HTML5 Audio Players

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

    scottandrew 10 Best HTML5 Audio Players

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

    mini speakker 10 Best HTML5 Audio Players

    [ Link ]

    4. MooTools Audio Player

    If you are already using the MooTools JavaScript framework you’ve likely come across this audio player. If not, it is definitely worth a look. MooTools is a flexible JavaScript framework, and the accompanying audio player mirrors some of the same ideals: it is fast, compact, easily customizable, and cross-browser compatible.

    Unlike some of the other players on this list, it skips bells and whistles in favor of fundamentals like easy skinning and support for different themes. It doesn’t have the raw power of some of the other players on this list and it does require the MooTools framework to operate. If you are looking for a standalone player, MooTools may not be the best fit, but if you’re looking for something flexible and fast, and don’t mind an extra library dependency, MooTools is definitely worth a shot!

    mootools player 10 Best HTML5 Audio Players

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

    jplayer 10 Best HTML5 Audio Players

    [ 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 player 10 Best HTML5 Audio Players

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

    soundmanager2 custom 10 Best HTML5 Audio Players

    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.

    soundmanager2 10 Best HTML5 Audio Players

    [ 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 especially 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!

    audiojs 10 Best HTML5 Audio Players

    [ 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 player 10 Best HTML5 Audio Players

    [ 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, especially if you are already using jQuery for other functionality.

    oiplayer jquery plugin 10 Best HTML5 Audio Players

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

    This is a guest post by Michael Dorf from Learn Computer. If you would like to write for ShoutMeLoud, check submission guidelines.

    Get Free Blogging updates in your Email

    Find more Topics based on Keywords

    Article by

    Michael has written 1 articles.

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

    { 1 comment… read it below or add one }

    Sajjad

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

    Reply

    Leave a Comment

    Previous post:

    Next post:

    `