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 (1)
    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 […]
  • Use Webcam to Create Animated GIF (1)
    Some time ago I saw some online animated gif creator and thought it could be done in JS instead of Flash. We could easily access webcam from browser with the getUserMedia API. Nice […]
  • Visualize Twitter connections with Twings (3)
    I always find it interesting to see who from people that I’m following on Twitter follows me back and also to see how those people are related with each others. I was looking the best way […]
  • Twitter Flock for Wordpress: multiple accounts tweets with style (67)
    Twitter Flock is Wordpress plugin for showing multiple accounts tweets with different color scheme for every account. Also, there are setting allowing you to control how your tweets will […]
  • 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

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