Engineering iTunes with HTML5 and CSS3

Dec 10, 2012

Creating iTunes with HTML5 and CSS3

Without resorting to any pictures or images, I created an iTunes music player with pure HTML5 and CSS3. There are two objectives in this project:

  1. to investigate the application of the box-shadow and gradient properties of CSS3 in user interface design;
  2. to utilize the native support of audio playback in HTML5 and build custom-made playback controls.

Features

  • All user interface elements are created using CSS3 and webfonts only. No images are used in this project.
  • Playback support is provided by HTML5. No plug-ins are used.
  • Playback buttons are clickable and usable.
  • Volume control is draggable and usable.
  • Progress bar is draggable.
  • Songs can be filtered by typing keywords in the search box.

Usage

Click on a song in the playlist to connect to server and play. The user can then control playback, volume and progress, and filter songs using keywords.

Known Issues

  • This demo currently works smoothly only on Webkit browsers.
  • Since the audio format that Firefox supports does not include MP3, music cannot be played.
  • On Windows, the logo of Apple cannot be displayed.
  • Remaining time cannot be displayed correctly in Safari.
  • There is a sudden jump when the user begins to control volume or progress. This is due to fact that the jQuery UI library is not fully compatible with CSS scale.

Notes

  • You are recommended to view this demo with Chrome on Mac OS X.
  • The songs used in this project are purely for demo purposes. They are streamed from Jamendo, which provides music free to download and license.

Leave a Reply

*