In the first two articles of this series I introduced the concept and code of a customized audio player. The prototype constructed to this point is “raw”, without any styling: the HTML5 and JavaScript has been written as fast as possible to prove that the basic concept works. In this article, I’ll focus on improving the look of the player and adding microdata, before introducing further functionality in part 4.

Read more about HTML5 Audio Player, Part 3

There are two approaches to making almost anything. The first is to dive in head-first, building from the top down, squirrelling into problems as they are found and hoping you’ll get everything right. The second is to create a series of simple test cases: building upwards, proving each step before using the work to generate a final, complete piece.

There are advantages to both methods, but the second tends to yield better results. I’ll demonstrate that approach here, in building the initial prototype of the web audio player I introduced in part 1 of this series.

Read more about HTML5 Audio Player Prototype

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 HTML5 multimedia, 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.

Read more about HTML5 Audio Player, Part 1