jPlayer: Playing MP3 Audio with jQuery CodeUnit 03 FEB 2010

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;
		ready: function ()

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:

Related Posts:

About Craig Lotter

South African software architect and developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.

  • Aaron

    Hello there,

    I’m fairly new to coding, especially concerning jQuery and Javascript, and I’ve been looking around for a detailed …”idiots guide to setting up jPlayer”, I’ll say, but I haven’t had any luck yet. I was wondering if you could help me by explaining the steps to take, and code, for setting up jPlayer in a web page?

    Oh, and does your website have to be uploaded to a server in order to use it, or can I have it fully operational sitting on my desktop? I haven’t got a server for my website yet.

    Thank you very much in advance!


    • With regards to your first part, I’m afraid the answer is not really. You do need to have a little more experience in jQuery and javascript to know exactly what you are doing and I’m afraid I simply don’t have the luxury of time available to me to write up a full idiot’s guide to… solution for you. So sorry about that.

      As for the second part of your question, I don’t fully understand what you are asking? In general, a website needs to be uploaded to a server in order to be seen by the general public. If you just want to view it on your local machine, then it can remain there, powered either by a local version of IIS or apache or whatever other webserver software you are running.

      • guest

        what a dick