Circular Audio Player For Angular Plugin | NgxCircularPlayer

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 Namengx Circular Player
Author Namemgechev
CategoryAngular, Audio, TypeScript
Official PageClick Here | Click Here
Official Websitegithub.com
Publish DateJanuary 2, 2022
Last UpdateJuly 16, 2023
DownloadLink Below
LicenseMIT

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

ngx-circular-player

Official Website(mgechev): Click Here

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

Related Posts

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

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