A Free and Open Source Audio Player

I am proud to announce Radio New Zealand's first free software project.

The project is a set of modular tools that we'll be using to build new audio functionality for the Radio NZ website. The project is hosted on GitHub, which we will use to (we hope) embrace the open source development model.

The first module (available now) is an audio player plugin based on the jQuery JavaScript library, and version 0.1 already has some interesting features.

It can play Ogg files natively in Firefox 3.1 using the audio tag. It can also play MP3s using the same javascript API - you just load a different filename and the player works out what to do. The project includes a basic flash-based MP3 player, and some example code to get you started.

The audio timer and volume readouts for the player are updated via a common set of events, so they work for both types of audio, and you can swap freely between them.

At the moment there is limited error checking, and obviously lots of room for improvements and enhancements.

One of these will be a playlist module, and this is something we are going to fund for our own use.

An interesting angle to the project is that we've already started to talk with the blind community to ensure that the player is usable for people with screen readers. The first phase of this is to test the mark-up for the audio player page to ensure it makes sense.

Phase two will be checking that the basic functionality is simple to use using screen reader and browser hotkeys, and phase three will test playlist manipulation.

I am excited about the project for two reasons. Firstly, we use a lot of free and open source software at Radio NZ, but apart from some bug fixes and minor patches we've not yet been a contributor to the free software commons.

Secondly, I see this as a chance to lift the bar for accessible interface engineering using just HTML and JavaScript. We chose to not use a full flash-based interface - a common approach these days - because it simplifies the building and maintenance of the player to some extent. It also lowers the cost of development, while building on well-understood accessibility techniques.

Let's see how it goes...

Equal Height Columns with jQuery

We are about to change to jQuery from Mootools, so I'm in the process of porting our current javascript functions. I'll do a separate post later on why we are changing.

In the meantime here is the code for equal height columns:

jQuery.fn.equalHeights=function() {
var maxHeight=0;
this.each(function(){
 if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;}
});
this.each(function(){
 $(this).height(maxHeight + "px");
 if (this.offsetHeight>maxHeight) {
  $(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px");
 }
});
};

It is called like this:

$("#cont-pri,#cont-sec,#hleft,#hright,#features,#snw").equalHeights();

The jQuery function returns an object containing only the elements found, so you can include identifiers that are not on every page and the function still works. On the RNZ site there are some divs on the home page that do not appear on other pages, but require the equal heights treatment. This means the call above works on any page without generating errors.

Hat tip

How to test for audio tag support in your browser

I am writing a small application at the moment that needs audio tag support for Ogg in Firefox 3.1.

The following is the snippet of code I'm using to test this. (I am using the jQuery library).

audio_elements = $('audio');
if('volume' in audio_elements[0] ) {
// processing here
}

This assumes that there is only one audio element on the page (in my case I dynamically insert one). If the volume property exists, I assume that the element can be used to playback Ogg Vorbis files.

There may also need to be a check that the browser actually has the codec installed. (Add a comment if this is the case, and I'll update this post when I work out how).

Update (19 Nov 2008): A better way is to add a check for the Mozilla browser into the test. At the moment, Safari has the audio tag, but only supports media types that work in Quicktime.

if('volume' in audio_elements[0] && $.browser.mozilla)

A new function has been added to the HTML5 draft spec - canPlayType() - that gets around these problems.