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.

One Reply to “Circular audio player for Angular”

  1. Hi, I like your player and i want to use it, but I can’t understand how it works. I want to have not play and pause but play and stop functions. Can you explain how I can do this?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.