A CSS3 HTML5 audio player with a circular seekable progress bar and complete fallback
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.



CirclePlayer is a demo intended to showcase the jQuery HTML5 Media Library jPlayer https://github.com/happyworm/jPlayer

Try the latest version.

Uses HTML5 Audio, CSS3 Transforms (transform:rotate) hooks provided by : https://github.com/lrbabe/jquery.rotate.js

A full browser fallback is planned, jPlayer provides the Flash HTML5 Audio fallback and the idea is to use a sprite map to display progress in non CSS3 compliant browsers. http://modernizr.github.com/Modernizr/ could be used to check CSS3 transform:rotate compliance.

Possibilities exist to enhance the demo with https://wiki.mozilla.org/Audio_Data_API for supporting browsers.

Note the progress bar will not function correctly in Opera 11 due to a JIT compiler bug in the Opera browser : http://twitter.com/dstorey/status/28108260418523137

The demo's current look is heavily inspired by http://forrst.com/posts/Untitled-CJz

Thanks to Jussi Kalliokoski for contributing.

CirclePlayer is dual-licensed under the GPL and MIT licenses