Amit Dhamu

Writes Code

Using MediaElement For Audio

I have been searching for a while for a solution to embed audio into my webpages. I have previously used JWPlayer and the Google MP3 Player. I found Google's to be a really ugly solution and the JWPlayer does too much for what I need it for.

I wanted something that could take advantage of the HTML5 tag now that we're in the modern era of the web. It's ironic how we are now relying on Flash fallback for audio and video players when HTML5 is not present whereas before we were trying to use JavaScript to fallback to if Flash was not present.

Anyway after doing some searching, I came across MediaElement.js which is written by John Dyer. MediaElement.js is a cross-browser solution with a consistent interface for audio and video for the web. It has received thumbs up from leading experts such as Chris Coyier and Paul Irish and takes advantage of the HTML5 and tags with a Flash fallback. What's also cool is that you can use the MediaElement.js API to wrap YouTube videos into the MediaElement skin to give all videos on your site a more consistent look.

The markup for MediaElement.js is very small as you use the native HTML5 and tags to embed your media. Check out some examples below.

Pharoahe Monch - Evolve (Audio Example)


Kendrick Lamar - HiiiPower (YouTube Video)


For more information about MediaElement.js check out the website for details about installation, options and how it works.


mp3 / mediaelement / audio / html5

← Pirelli F1 2012 Tyre Range Some Bangers From The SchoolBoy Q Album →