HTML5 Circle Audio Player: Make HTML5 audio players appear as circles

Recommend this page to a friend!
  Info   View files Example   View files View files (7)   DownloadInstall with Composer Download .zip   Reputation   Support forum (1)   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 266 All time: 172 This week: 4Up
Version Licenses JavaScript version Categories
circle-audio-player 2BSD License, GNU ...1.0jQuery, Audio
Description Author

This is a jQuery plugin that can make HTML5 audio players appear as circles.

It can scan the page for HTML5 audio elements with the data-circle-audio-player custom attribute and change their appearance and behavior to look circular.

The progress and time of the audio being played is updated visually as a ring of the circle.

Several pre-built themes are provided to customize several aspects of the player presentation.

Innovation Award
JavaScript Programming Innovation award winner
August 2015
HTML5 supports playing audio on Web pages but the default audio player HTML5 element that most browsers present is very simple and does not show much information about what it is playing.

This jQuery plugin to present audio players as circles with rings that show the progress of the audio being played.

Manuel Lemos
Picture of Harish Chauhan
Name: Harish Chauhan <contact>
Classes: 2 packages by
Country: India India
Age: ???
All time rank: 747 in India India
Week rank: 6 Up1 in India India Up
Innovation award
Innovation award
Nominee: 1x

Winner: 1x




  • 17 Aug 2015

Sound Control Added

Seeking position Added

New skin ( green ) added

  • 16 Aug 2015

This library needs jquery to run.

Replace your html5 audio tags with circle audio player.

Easy to install. Please check example.html for installation.

3 initial skins. Easy to create more themes.

  Files folder image Files  
File Role Description
Files folder imagedist (1 file)
Files folder imagelib (1 file)
Files folder imagesrc (2 files)
Accessible without login Plain text file example.html Example Sample output
Accessible without login Plain text file Data Auxiliary data
Accessible without login Image file screen.png Output Sample output

  Files folder image Files  /  dist  
File Role Description
  Plain text file Class Class source

  Files folder image Files  /  lib  
File Role Description
  Accessible without login Plain text file jquery.min.js Appl. Application script

  Files folder image Files  /  src  
File Role Description
  Plain text file Class Class source
  Plain text file Class Class source

 Version Control Unique User Downloads Download Rankings  
This week:0
All time:172
This week:4Up
User Comments (1)
4 years ago (keran)