Zen is a single-song HTML5 Audio Player, powered by jPlayer, styled and mostly animated with CSS3. Zen has very simple user interface. You can see In the stopped/paused state, it similiar like a little of a dark Zen stone lying on bright sand, that’s why this the creator call this audio player as Zen.

This Audio Player is just a demo. It works more or less in Firefox4, Chrome, Safari, Opera, iOS, but there are some differences in the visuals. Also other known issues are:

• There is no preload indicator yet.
• Chrome on Windows has a known box-shadow bug where the circles don’t get cut off, no panic, should already be fixed in the nightly.
• Opera starts to rotate funky after the first round, no idea why.
• On iOS the many gradients and box-shadows make the transition slow. It might would need some simpler styling.
• Plus there is no proper fallback for older browsers. A Modernizr and Flash combo should do it.

The player is now on github for forking, chewing and spitting out, if you’re interested.

Requirements: jQuery & jPlayer plugin
Demo: http://lab.simurai.com/ui/zen-player/
License: Other License

Incoming search terms for the article:

• simple html5 audio player
• html5 audio player
• jplayer circle player
• jPlayer circle player tutorial
• html5 circle audio player
• jplayer circle player wordpress
• ZEN - HTML5-CSS3 Audio Player
• html5 circle player
• simple audio player html5
• simple audio player