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

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2025-07-09 (2 days ago) RSS 2.0 feedNot enough user ratingsTotal: 266 All time: 172 This week: 4Up
Version Licenses JavaScript version Categories
circle-audio-player 3BSD License, GNU ...1.0jQuery, Audio
Description 

Author

Harish Chauhan

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
Winner		 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

Example

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Circle Audio Player</title>
  <script src="lib/jquery.min.js"></script>
  <script src="src/jquery.circle-audio-player.js"></script>
  <script src="src/jquery.circle-audio-player-skins.js"></script>
 </head>
 <body>
     <audio controls preload="auto" data-radius="40" data-skin="plane" data-circle-audio-player>
        <source src="Ringtone - Khoya khoya chand.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>

     <audio controls preload="auto" data-circle-audio-player>
        <source src="Ringtone - Khoya khoya chand.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>

     <audio controls preload="false" data-radius="200" data-skin="green" data-circle-audio-player>
        <source src="http://cdn.dj-punjab.info/songs/128/553/Aaye%20Ho%20Meri%20Zindagi%20Mein%20(RaagJatt.com).mp3" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>

     <audio controls preload="auto" data-skin="black" data-circle-audio-player>
        <source src="Ringtone - Khoya khoya chand.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>
     
     <audio controls preload="auto" data-skin="glossy" data-radius="130" data-circle-audio-player>
        <source src="Ringtone - Khoya khoya chand.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>
 </body>
</html>

Details

circle-audio-player

circle-audio-player

  • 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 (7)  
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 README.md Data Auxiliary data
Accessible without login Image file screen.png Output Sample output

  Files folder image Files (7)  /  dist  
File Role Description
  Plain text file jquery.circle-audio-player.min.js Class Class source

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

  Files folder image Files (7)  /  src  
File Role Description
  Plain text file jquery.circle-audio-player-skins.js Class Class source
  Plain text file jquery.circle-audio-player.js Class Class source

Downloadcircle-audio-player-2025-07-09.zip
Downloadcircle-audio-player-2025-07-09.tar.gz
 Version Control Unique User Downloads Download Rankings  
 100%
Total:266
This week:0
All time:172
This week:4Up
User Comments (1)
Hi.
7 years ago (keran)		70%StarStarStarStar
 

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.