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.
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:
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 -
— Walt Mossberg (@waltmossberg) October 5, 2012
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.
The beautiful artwork in the background was one by ‘Shairin‘, a talented artist from Finland. Click the photo to see it on deviant art.
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!