jPlayer: Playing MP3 Audio with jQuery

Loading and playing an Ogg or MP3 file using jQuery has just become easy, thanks to the very customizable and functional jPlayer jQuery plugin, brainchild of Happyworm’s Mark Boas and Mark Panaghiston.

Simply put, jPlayer is a plugin that allows you to play and control audio files on a webpage, create and style and audio player using only HTML and CSS and add sound effects to your jQuery projects. It technically also allows for faster audio streaming when using HTML5 with the alternative Ogg support.

And all of this is done without the help of visible Flash.

Implementing jPlayer is as easy as downloading the package and running this little bit of code to get things started:

        var global_lp = 0;
        var global_ready = 0;
        $("#jquery_jplayer").jPlayer({
                ready: function ()
                {
                        $(this).setFile('big_alarm.mp3').play();
                }
        })

There are naturally a host of control functions that comes with the jplayer object that allows you to play, pause, stop, change volume, etc. as well as some important control events like onProgressChange and onSoundComplete which allow you to control the way in which the audio being played and handled on your page.

Admittedly, adding the extra styling and functionality in order to throw a little audio player up on your page does involve quite a bit more work, but thankfully though jPlayer comes with quite a few handy demos which should have most developers up and running in no time.

In other words, well worth taking a look (or should that be listen) then! :)

Related Link: http://www.happyworm.com/jquery/jplayer/