Ngx Circular Player is a small circular audio player for Angular.js applications.

Must Read: HTML5/CSS Audio Player using AngularJS | AngularAudioPlayer

NgxCircularPlayer for Angular

Configuration

You can specify the following inputs:

• source – Specifies the audio file.
• radius – Specifies the radius of the player. Default value 120.
• stroke – Specifies the stroke width. Default value 20.
• innerStroke – Specifies the inner stroke width. Default value 2.
• strokeColor – Specifies the stroke color. Default value #fff.
• progressStrokeColor – Specifies the color of the stroke indicating the progress. Default value #858585.
• innerStrokeColor – Specifies the inner stroke color. Default value #eee.

How to make use of it:

1. Install and import the module.

# NPM
$ npm install ngx-circular-player --save

import { NgxCircularPlayerModule } from 'ngx-circular-player';
@NgModule({
  imports: [NgxCircularPlayerModule],
})
export class AppModule {}

2. Insert the circular trigger into your template.

<ngx-circular-player 
  source="1.mp3">
</ngx-circular-player>

3. Customize the carousel with the following options.

<ngx-circular-player 
  source="1.mp3"
  radius="120"
  stroke="20"
  innerStroke="2"
  strokeColor="#fff"
  progressStrokeColor="#858585"
  innerStrokeColor="#eee">
</ngx-circular-player>

See Demo And Download

Official Website(mgechev): Click Here

This superior jQuery/javascript plugin is developed by mgechev. For extra Advanced Usages, please go to the official website.