rhulse edited this page Sep 13, 2010 · 17 revisions
Clone this wiki locally

The audio player is jQuery plugin for playing back media (currently only audio) in a web browser.

Also included are some event watchers for monitoring activity of audio and video elements.


The code written by Radio NZ is licensed under the GPL V2 or later.

Be aware that other code included in the project may use a different license.

The graphics files (Player Buttons) are licensed under a Attribution-Noncommercial-Share Alike 3.0 (New Zealand).

For attribution you can include a link back to this wiki page in the source code of the player like this:

Graphics files are from Radio New Zealand’s media player 
project at: http://github.com/rhulse/media-player/wikis/home


The plugin is designed to provide a common API to interact with the audio item. This includes stop, play and pause, and events to update a running clock of elapsed time and the volume read out.

The events are also common to all media objects.

At the moment this is a flash-based player (for MP3) and the html5 audio tag (in Firefox) for Ogg Vorbis Files

There is an example player and CSS with buttons that you can use to try it out. Please make up your own design before deploying the code somewhere!

We aim to track changes to the HTML5 audio tag spec as closely as possible.

The player interface is being designed to be very easy to use for users of screen readers.


0.25 (16 December 0.25)

Internally the media playing elements are now created as objects. This caused a few bugs which were fixed.

Code was added to example 2 to allow the player to autoplay a file by id instead of by URL. The URL is stored in an object, but this could just as easily be return from a CMS via AJAX.

Other bugs fixed includes the slider stability bug from 0.22 below.

Another example was added – example-events.html – to proved a method to track events sent from the audio tag. This is for debugging as the HTML5 spec evolves.

There is also an example of video tag use (you’ll need to supply your own file to test this)

11 December

Changed name of project to media player, so we can add support for the HTML5 video tag

0.22 (3 Dec 2008)

The time slider now will cause the player to seek when it is clicked.

There are two known issues:

  • It will not seek from stop with an MP3 (ogg is OK)
  • the slider flicks back to the old value after a seek before continuing normally.

0.21 (3 Dec 2008)

Added a time slider to the player. This gives a visual readout of the relative position in the file.

0.20 (24 Nov 2008)

Added a popup (new browser window) version of the player which can pass data from the main site window to the player.

This is done via a shared cookie-based queue. The point is so users can move from page to page, click on several audio items, and for those to be added to the floating player window.

There are two example of this.

Example 02 sends the id attribute from the audio link to player (for the player to handle in some way).

Example 03 sends the href (the link to the audio) to the player. The audio plays right away.

0.11 (20 Nov 2008)

A bunch of small improvements to ensure the plugin API is stable under all conditions, and a new parameter that can be used during the initialisation phase to not load flash (for people who want to stick to free software). Also implemented the new type attribute in the audio tag.

The player now drives the timer updates via events. I figure most people won’t want to think about formatting times so the player now sends an event every 1 second for the formatted time. (this will eventually be configurable to allow 1/10 second resolution).

There were also changes to the way the player interacts with the audio element.

The code for updating the audio item time was moved to a function to allow us to be more specific about when it is called and also to help with moving to driving the udpates via events.


The initial release is fairly basic – you can give it an MP3 or Ogg file (in Firefox 3.1 which has built in Ogg Vorbis support) – and it will play it.


We welcome suggestions and patches to this project. Some work is currently being funded by us, and this code will add playlist functionality and the ability to launch the player in a pop-up window.

If you want to get involved please contact me.