HTML5/CSS3 Circle Music Player

More then a year ago my very talented designer friend Jovan Stanojevic presented me idea of Circle Music player which will play local .mp3 files. This is his original idea, but after we start to work on this a few things were changed.
[He have more great designs which you’ll see if you go to his dribbble profile]

Idea was to create music player that looks really cool and easy to use, but also to experiment with HTML5 and CSS3. Since that some of those stuff are supported by Chrome only this will not work in other browsers.

This music player have only basic options, but still is very functional. You’re able to play local .mp3 files from selected folder, pause, rewind, shuffle and repeat them, change volume and mute. We have a few ideas for features that might be interesting to implement later:

– store playlists in localStorage for later use,
– read ID3 tag from MP3 for song data,
– drag’n’drop for arranging playlist,
– support more audio formats,
– use keyboard to control player …

We could find some compromises to make this work on more browsers, but some of the reasons why this works in Chrome only are:

– webkitdirectory is used for getting list of files from selected folder,
– webkitNotifications to see notification about next song even when tab is not in focus,
– styling input type range …

As I said, this is experiment only and I’m not sure if anybody will use music player from browser on regular basis.

If you have some suggestions and want to contribute feel free to do that on GitHub.