Icontem

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   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2015-08-23 (1 year ago) RSS 2.0 feedNot yet rated by the usersTotal: 168 This week: 1All time: 281 This week: 19Up
Version Licenses JavaScript version Categories
circle-audio-player 1BSD 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
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
Name: Harish Chauhan <contact>
Classes: 1 package by
Country: India India
Age: ???
All time rank: 12512 in India India
Week rank: 19 Up2 in India India Up
Innovation award
Innovation award
Nominee: 1x

Winner: 1x

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  
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  /  dist  
File Role Description
  Plain text file jquery.circle-audio-player.min.js 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 jquery.circle-audio-player-skins.js Class Class source
  Plain text file jquery.circle-audio-player.js Class Class source

 Version Control Unique User Downloads Download Rankings  
 100%
Total:168
This week:1
All time:281
This week:19Up