7 Awesome HTML5 Audio Players

jPlayer is the completely free and open source (GPL/MIT) media library written in JavaScript. A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer’s comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer’s active and growing community.

2. MediaElement.js – HTML5 video player and audio player with Flash and Silverlight shims

HTML5 <video> and <audio> made easy. One file. Any browser. Same UI.

Instead of offering an HTML5 player to modern browsers and a totally separate Flash player to older browsers, MediaElement.js upgrades them with custom Flash and Silverlight plugins that mimic the HTML5 MediaElement API.

It’s a single-song HTML5 Audio Player, powered by jPlayer, styled and mostly animated with CSS3. About the name? Hmmm.. In the stopped/paused state, doesn’t it remind you a little of a dark Zen stone lying on bright sand?

Crossbrowser Audio solution featuring HTML5. Comes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors
and two different button sets for light and dark themes. Easy to set up. Just a few lines of Javascript and a quantum CSS.

Featuring the technology of Projekktor it comes with cross-browser compability, Flash-fall back plus optional
social- and artists information links.

4. jMediaelement – jme – not only just another html5 audio / video player

jme is an HTML5 audio / video development kit with Flash Fallback, which focuses on flexibility, intuitive DOM-API and semantic code.

We recently built an HTML5 audio player for Tim Van Damme‘s The Box, a new podcast where he interviews people who make cool stuff. Tim wanted an HTML5 audio player on the site, and we put together some jQuery to hook up the player interface he designed. In this article we’ll run through the code to explain how it works, covering a few caveats along the way.

In this article we will look at the <audio> element, starting with the basics, looking in detail at how it works across different browsers, and then build a radio player application that uses live audio from a streaming server.