Circular audio player for Angular

A simple circular music player for Angular You can use this component on your angular app to add audio player.


npm i ngx-circular-player --save

After that in your AppModule:

import { NgxCircularPlayerModule } from 'ngx-circular-player';

  imports: [NgxCircularPlayerModule],
export class AppModule {}

You can use the player in your template by:

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


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.

See live demo and download source code.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by mgechev. Visit their official repository for more information and follow for future updates.