The White Noise HTML 5 audio player project was a responsive design project completed for a fellow designer. He created a wonderful design and wanted the page developed. He selected to use the jPlayer open source video/audio player and meet some basic goals.
- Optimizing the player for all resolutions
- Have a playlist that was generated from XML
- Display static duration for songs in the playlist
- Slice PSD files
- Front-end coding
- Extend jPlayer Playlist object to include duration (static)
- Generate playlist from XML (convert to JSON to populate playlist)
I was provided with two mock-ups in PSD format, one for small and large screen. I built the site starting with small screen utilizing a responsive web design methodology to enhance the layout for large screen. I used the jPlayer circle player and skinned it using the graphics sliced from the PSD files and used the jPlayer playlist plugin to generate the playlist.
In order to show the duration for each song, I had to slightly modify the playlist object so that it would generate HTML for each of the songs in the playlist if they were added to the playlist XML file. The XML used to generate the playlist was extremely basic, so rather than using a jQuery plugin to convert the XML to JSON, I converted the XML to a JSON formatted string and passed each string to the parseJSON method and added each item to the playlist in an AJAX call.
The gallery contains screen shots of the product at various resolutions, but please feel free to fiddle with the player yourself.
CSS, HTML, jQuery, JSON, XML