Demo : jPlayer circle player

jPlayer circle player

In this demo jPlayer is combined with HTML and CSS to create a Circle Player, which plays audio. When playing, the play progress is shown as a green ring around the circle. If the buffering information exists, then a white ring grows representing the download progress.

You can customise the way it looks and make it fit your pages colours and style.

This demo will use the HTML solution if it can, otherwise the Flash fallback solution will be used. The supplied media formats are M4A and OGA.

The Circle Player has its own repository on GitHub and is maintained by Happyworm.

This demo uses uses two other jQuery plugins and part of a JavaScript library.

jquery.grab by Jussi Kalliokoski
jquery.transform by Louis Remi
mod.csstransforms by the Modernizr team

Note that the {wmode:"window"} option is set to ensure playback in Firefox 3.6 with the Flash solution. However, the OGA format would be used in this case with the HTML solution.

Press play to start the media.

play
pause