Build an HTML5 MP3 Player With SoundManager 2 - Tuts+ Premium


It's time for another Premium tutorial! This week, James Tyner will walk you through the process of building an HTML5 MP3 player, step by step, with the SoundManager 2 library, jQuery, and a little help from Flash (for extra audio functionality).

Premium Preview

SoundManager 2 HTML5 MP3 Player tutorial
Click for a demo.

In this tutorial I will show you how to create a JavaScript MP3 Player with jQuery and the SoundManager 2 JavaScript library that uses a hidden SWF file to play the sounds. (I could have used HTML5 Audio, but we would have lost the ID3 functionality, and so would have had to hard-code all of our artists and titles.)

You'll use jQuery, jQuery UI, and jScroller to manage the UI, with graphics already provided for you, and learn how to use SoundManager 2, a cross-browser JavaScript audio library that even works on iOS (if you are willing to lose the extra features, such as ID3 functionality).

Everything is explained step by step as you build the player. Check out the demo to see the end result.

Read the Full Tutorial

Premium members can access the full tutorial right away!

If you're not yet a Premium member, you can still read the first few steps of the tutorial, which are enough to help you code the basic play and stop buttons..

Tuts+ Premium Membership

We run a Premium membership system which periodically gives members access to extra tutorials, like this one! You'll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium, Cg Premium, Photo Premium, and the new Mobile Premium too. If you're a Premium member, you can log in and download the tutorial. If you're not a member, you can of course join today!

Also, don't forget to follow @envatoactive on twitter, circle us on Google+, like us on Facebook, and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.

Related Posts