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]

html5-css3-round-music-player

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.

  • Bigshark – larger buttons on Grooveshark (0)
    GrooveShark is one of the web services which I’m using on daily basis. Actually, I have one computer which I use only to play music from my GrooveShark playlists, while I’m sitting on […]
  • Image gallery in 4 lines of code with MooTools and Dojo (8)
    Recently I wrote article how to create image gallery with description in 4 lines of jQuery code. Now, I will do the same thing with two other popular JavaScript frameworks, MooTools and […]
  • Create image gallery in 4 lines of jQuery (146)
    Few days ago friend asked me to build image gallery with thumbnails for her web page. Request was pretty simple, she wanted large image and few thumbnails bellow that. Also, large image […]
  • Gradienter: Add gradient to elements (24)
    Last night I started to work on Wordpress theme for blog and I got an idea that every post should have their own background color and that maybe those colors can be in gradient. Since that […]
  • jqBarGraph – jQuery graph plugin (157)
    jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. All you have to do is to pass your […]

3 comments on "HTML5/CSS3 Circle Music Player"

Works fully on last Opera browser 🙂

Kube17 on April 14, 2016 at 12:45 pm

thanks this is really good html 5 music player thanks for the code..

rahul on April 9, 2015 at 10:16 am

Can you please give me code that will work on all the browsers

Pulkit Sharma on August 16, 2013 at 5:34 am

Leave a Reply to Pulkit Sharma Cancel reply

Your email address will not be published. Required fields are marked *