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.

  • jqIsoText: jQuery Text Effect Plugin (107)
    Some content on our pages are more important than other and we want to made him eye catching. There are lot of techniques to achieve that.  One of them is jqIsoText. With this […]
  • JUST – JavaScript Useful Stuff (5)
    I like experiment with data visualization on client side. For that purpose, of course, I need some data for development phase. Since that development phase means that something constantly […]
  • Just Random Color (0)
    Some time ago I was working on app where for each category we had to assign random color in case that user didn't choose one. A few day ago I needed to generate random color again. Instead […]
  • Coin Slider: Image Slider with Unique Effects (1638)
    After jqFancyTransitions I decided to release new jQuery image slider plugin with more unique transitions effects. I have ideas for new effects and after I didn't find that somebody […]
  • 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 […]

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 *