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
Post Name | ngx Circular Player |
Author Name | mgechev |
Category | Angular, Audio, TypeScript |
Official Page | Click Here | Click Here |
Official Website | github.com |
Publish Date | January 2, 2022 |
Last Update | July 16, 2023 |
Download | Link Below |
License | MIT |
Configuration
You can specify the following inputs:
source
– Specifies the audio file.radius
– Specifies the radius of the player. Default value120
.stroke
– Specifies the stroke width. Default value20
.innerStroke
– Specifies the inner stroke width. Default value2
.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.