Simple Round Player.js

A simple script that finds audio tags and wraps them with a graphical round player interface.

Requirements

  • jQuery

Installation

Install with Bower or checkout this repository.

bower install simple-round-player --save

How to use

To use, include the javascript file on your page and add a data-srp attribute to any audio tags. Afterwards, launch the script using SimpleRoundPlayer.init();

<audio data-srp="true" src="./media/The Ameoba - Showtime (Intro).mp3"></audio>

Customize the colors of the player using basic CSS. For the progress bar, which is rendered in a canvas, you can pass variables as an optional configuration hash :

SimpleRoundPlayer.init({
    containerColor : "#ff0000",
    ringColor : "#00ff00",
    ringProgressColor : "#0000ff",
    strokeWidth : 6,
});

Live example