1000 songs in your pocket… now in HTML5

Apple’s rise as the world’s biggest company ever in the history can be attributed to one single product – the iPod.

Steve Jobs pulled out the tiny mp3 player, the size of a deck of a cards and ushered Apple towards it’s greatest era.

I decided to recreate the original iPod using HTML5 and CSS3. I’d like to show you the current progress.

View Demo

 

Visit the above link with a modern browser (Chrome, Safari, Firefox) to see it in action.

 

I have managed to get the iPod ‘look’ using CSS. I’ve used gradients, outlines and shadows to mimic this photo of the first generation iPod.

 

Here is how my player looks:

iPod - Designed by Apple, Made by Inventika Solutions, tribute to Steve Jobs

 CSS3 Generator and Colorzilla were indispensable in creating the necessary CSS code. My hobby of sketching came in handy.

 

To get the scroll wheel working I tried to use “Shiny Knob Control with jQuery and CSS3″ by Tutorialzine however there were few giltches. I stumbled across this wonderful jQuery plugin ‘jQuery Knob’ developed by Anthony Terrien. It worked beautifully, it even had a special iPod mode which had infinite scrolling.

I hope to complete them by 5th October in time for Steve Jobs’ first death anniversary. I dedicate this iPod to Steve Jobs, without whom there would have been no iPod.

On Steve’s first death anniversary, I showed my iPod to Walt Mossberg, here is his reaction -

 

Update

3 September, 2012: I have implemented audio playback. You can now navigate to any song and play them.

You can also change the volume and play/pause the song.

I tested it on the default Android browser on ICS and it worked. Surprisingly the audio didn’t play while using Chrome for Android on the same device. You have to press the play/pause button for the song to start playing.

11 September 2012: I have completed the work for the ‘forwad’ and ‘reverse’ button. You can skip tracks and even scrub via the select button.
Stackoverflow was of a big help in doing this.

17 September 2012: For the past couple of days I was working on allowing infinitely long list to work on the iPod. Previously any list longer than 6 items used to get cut off. I have also used creative commons songs so that you can actually try the iPod and listen to songs.

5 October 2012: I added the ‘Extras’. Now you can see the current time in ‘clock’ and the current month in ‘calendar’. I’ve also added a rudimentary contact list.

 

Thank you list

Anthony Terrien for his jQuery plugin ‘jQuery Knob’.

Big thanks to these guys for their wonderful music and generosity to provide artists like me to use their songs in our projects for free.

Josh Woodward
Blue Ducks
Blank Kytt
Phoenix Trap

The beautiful artwork in the background was one by ‘Shairin‘, a talented artist from Finland. Click the photo to see it on deviant art.

Further Work

I’ll try to add option to shuffle songs and try to include the click wheel whirring sound.

To take it to the extreme level, I might make the battery go down as you play songs.


 

We design things and make them come to life! If you are looking for creative web design services, contact us today!

Related posts:

Let's keep in touch! We share tips on how to get the most from your website.