Adding audio to your website, blog or online course is pretty easy to do these days. Long gone are the days when we would force students to download and install proprietary players like Real Player or Quicktime. With the ubiquity of Flash and JavaScript, and mp3 we now have more options for delivering audio on the web than ever before.
Here are 4 audio players that I have been working with recently while redeveloping a French language course. All of these players support mp3 and are built using JavaScript and Flash. 2 of the players (Playtagger and Yahoo Media Player) only require a single line of code to get working on a page. The other 2 (WordPress Audio Plugin and the JW FLV Player) are more complicated, but much more feature rich. All will do the job of playing audio without requiring a software download or install by students and all worked when I tested them in D2L.
The links to the demo of each player will open in a new window since I didn’t want to have multiple players competing with each other on the same mp3 files.
1) Playtagger
The most basic of all the players on this list, the Delicious Playtagger, is minimalism in action. You can start, stop or add the file to Delicious. That’s about it. No pause or volume control. In fact, no audio controls whatsoever.
But what Playtagger lacks in features it makes up for in simplicity of use. Include a single line of JavaScript in your HTML, and any link to an mp3 file in your document automatically becomes playable on the page. A play icon will appear just to the left of the mp3 link.
The one little problem I have with the Playtagger is that if you click on the text link, the mp3 file may either try to load in your default media player or try to download the mp3 file to your computer, depending on your browser. It would be better if the mp3 file played in Playtagger regardless of whether you click on the Playtagger play icon or the actual text link itself.
That one minor problem aside, if you are looking for a simple option to play an mp3 file, you can’t get much simpler than Playtagger.
Playtagger in action.
2) Yahoo Media Player
Like Playtagger, the Yahoo Media Player is added to a page with a single line of JavaScript, which adds the audio player to any mp3 link on your page. Click on the play icon beside the file and the player opens up at the bottom of the screen.
The Yahoo Media Player has more features than Playtagger. There is a pause button, skip forward/back to the next/previous track control, volume control, and track and time information.If you have multiple audio files on a page, the Yahoo Media Player will play the files back to back like a playlist. In fact, there is a playlist option within the media player itself.
The Yahoo Media Player does give you more options to customize the interface and the default behaviour of the player. There are some documented hacks at the media player wiki which come in handy if you want to extend or change the player.
Another resource you will want to check out if you use the Yahoo Media Player is the blog of Eric Fehrenbacher. Eric has written a number of scripts that extend the player and add extra features. Features like TrackSeek , which adds a slider to give users the ability to move forward and back in a track and TrackLoop which will loop through a playlist after it is finished.
Yahoo Media Player in action.
3) WordPress Audio Player
First off, the WordPress Audio Player is not just for the WordPress blog platform. There is a stand alone version that can be used on any web page.
This audio player is a tad more complicated than Playtagger or the Yahoo Media Player. There is more mucking around with the code to set parameters, but the process is well documented and should be fairly straightforward to get you up and running.
You also have to download and install the scripts for the WordPress Audio Player on your own server, unlike Playtagger and the Yahoo Media Player whose scripts are hosted on external servers. This could be a deal breaker if you don’t have access to a web server. However, if you are using D2L, you can use the file manager in D2L as a place to serve up the files from.
Those negatives aside, I think the WordPress Audio Player has the nicest interface of the lot and packs all you need for features in a compact player. The player itself slides open and closed so it takes up very little screen space and you can change the look and behaviour of the player by changing a few values in the settings. And unlike the Yahoo Media Player, the WordPress Audio Player comes with a slider enabled out of the box with no need for a third party script.
WordPress Audio Player in action.
4) JW FLV Player
The JW FLV player is by far the most full featured (and hence, the most complicated) of the 4 players here. The JW FLV Player works not only for audio files but for video as well.
Of all the players, JW FLV is the only one capable of doing true media streaming using RTMP as opposed to progressive downloading. True media streaming requires a media server. If you have access to a medai server, then JW FLV Player is your player.
Like the WordPress Audio Player, you need to upload the Javascript and Flash files to your own server.
Configuring the player can be a bit of a frustrating affair if you are not technically inclined. Much of the documentation and tutorials feel like they were written by developers, which is okay if you are a developer but not so if you just want to get the thing working. You should feel comfortable working in JavaScript before diving into the JW FLV Player, especially if you want to customize the features or look and feel beyond the default player.
Speaking of which, the JW FLV Player does have a vibrant developer community and many developers are creating and releasing skins and addons that change the look and functionality of the default player, so you have a lot of pre built interfaces to choose from if the default interface doesn’t toggle your play button.
JW FLV Player in action as an audio only player. This is a streamed mp3 file from our Flash media server.
5) Bonus for the more geek oriented: SoundManager
Okay, if the thought of digging into the JW FLV Player code excites rather than terrifies you, then be sure to check out SoundManager. SoundManager is not a player per se, but rather bills itself as a Javascript Sound API which lets you create some pretty impressive audio players. Check out the page as playlist demo and the still-under-development-so-may-not-be-working-perfectly examples of the 360° Player Demo. However, SoundManager is very JavaScript intensive and I was never able to get it working reliably enough in D2L to use it.
And then there is HTML 5
The chances that most of these players will become obsolete once the WC3 releases HTML 5 to the world are pretty good. HTML 5 promises easier ways to embed audio and video content on web pages with standard HTML tags. The goal is to make adding multimedia content to a web page as easy as adding an image or a table is currently.
But even though HTML 5 got a huge Google boost with the demo of Google Wave, which is a fully functioning HTML 5 web application, we’re still a few years away from it being available widely enough to rely on it as the sole method of delivering audio and video content. So in the interm we still need players to play multimedia content.