Sketches for an HTML5 audio player
Part of the Multimedia in JavaScript Reading List

Cet article est également disponible en français

You may not be old enough to remember the days of WinAmp, which was (in its original incarnation) a basic MP3 playback application with the killer feature of customizable themes. Today, we can create our own media player using HTML5 and JavaScript, customizing the appearance with CSS. Planning and building this player will allow developers to learn about , JavaScript DataViews, and the WebAudio API.

In this entry I’ll discuss the planning and design of the player’s interface; the remaining articles in the series will build the code.

The Basic Player

First, let’s assemble a reasonable feature list:

  • Obviously, the code should play MP3 files: very achievable, now that Firefox supports the codec. To keep things simple, the player will have just one predefined track to start.
  • We’ll need basic audio controls: play, pause, volume, and mute.
  • A progress bar should show how much music has played, and how much is left.
  • A timer should show how much time is left on the track.
  • Another button should set the music track to loop infinitely.
  • The track name, artist and album information should be displayed. (In the initial version of the player, this information will already be known.)

The Advanced Player

It’s important to create a path for future improvements to the audio player. These will include:

  • Clicks on the progress bar should advance and “rewind” the audio track.
  • The ability to load music tracks, and for those tracks to form playlists. For that to happen, we’ll need a Load button.
  • Any ID3 metatag information in these tracks – name, year, artist, and album – will be read and displayed.
  • A meter should show levels in the left and right audio channels.

Functionality and Testing

Because we have a growing list of functions, interaction should be carefully considered, even in the simple player.

  • The interface should be simple: the Play button should swap to a pause state when clicked, rather than presenting the user with separate buttons for each action.
  • Clicking Mute should set the volume slider to 0 and pause playback. Clicking the same button again should resume playback at the previous volume.
  • When the track has finished playing, it should rewind to its beginning and shift to paused, unless the Loop button is on.

The advanced functions should also be tested, to know that they can be achieved.

Resources

It’s important to know what resources and content you have to hand before starting a project. In this case, I have the following:

  • A music track by Nine Inch Nails, licensed under Creative Commons.
  • The HTML5 <audio> and <progress> elements, with supporting JavaScript.
  • PNG files for the buttons and background of the player, based on initial sketches.

Initial Design

I always prefer to work with pen and paper to start, just to rough in the design. Shown in the header for this article are some initial sketches, on GridBooks pages (a tool I’ll introduce in the very near future).

Expansion & Accessibility

It’s important to plan for maintenance, accessibility and expansion of your code. To this end, I’ll be writing clearly defined functions in my JavaScript, with HTML & CSS to match, together with accessibility affordances. Ideally, audio with spoken content or lyrics would be captioned, although that will take a separate series of articles.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.