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.
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
- PNG files for the buttons and background of the player, based on initial sketches.
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
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.