Home

Angular Audio Player

A library for loading and playing audio using HTML 5 for Angular 7/8/9.
(https://vmudigal.github.io/ngx-audio-player/)

Table of contents

• Demo
• Installation
• Getting Started
• Usage
• Versioning
• Developer
• License

Demo

Basic Player

A simple, clean, responsive player for playing single audio with or without title.

Advanced Player

A simple, clean, responsive player for playing multiple audios with playlist support.

Working Demo

Installation

ngx-audio-player is available via npm and yarn

Using npm:

$ npm install ngx-audio-player --save

Using yarn:

$ yarn add ngx-audio-player

Getting Started

NgxAudioPlayerModule needs Angular Material.
Make sure you have installed below dependencies with same or higher version than mentioned.

"@angular/core": "^9.0.0"
"@angular/common": "^9.0.0"
"@angular/material": "^9.0.0"

Import NgxAudioPlayerModule in in the root module(AppModule):

// Import library module
import { NgxAudioPlayerModule } from 'ngx-audio-player';

@NgModule({
  imports: [
    // ...
    NgxAudioPlayerModule
  ]
})
export class AppModule { }

Usage

Material Style Basic Audio Player

HTML

<mat-basic-audio-player [audioUrl]="msbapAudioUrl" [title]="msbapTitle" [autoPlay]="false" muted="muted" (ended)="onEnded($event)"
    [displayTitle]="msbapDisplayTitle" [displayVolumeControls]="msaapDisplayVolumeControls" ></mat-basic-audio-player>

TS

// Material Style Basic Audio Player Title and Audio URL
msbapTitle = 'Audio Title';
msbapAudioUrl = 'Link to audio URL';   
   
msbapDisplayTitle = false; 
msbapDisplayVolumeControls = true;  

Properties

Name	Description	Type	Default Value
@Input() title: string;	title to be displayed	optional	none
@Input() audioUrl: string;	url of the audio	mandatory	none
@Input() autoPlay: false;	true - if the audio needs to be played automaticlly	optional	false
@Input() displayTitle = false;	true - if the audio title needs to be displayed	optional	false
@Output() ended: Subject;	Callback method thats triggers once the track ends	optional	- N.A -
@Input() displayVolumeControls = true;	false - if the volume controls needs to be hidden	optional	true

Material Style Advanced Audio Player

HTML

<mat-advanced-audio-player [playlist]="msaapPlaylist" [displayTitle]="msaapDisplayTitle" [autoPlay]="false" 
    muted="muted" [displayPlaylist]="msaapDisplayPlayList" [pageSizeOptions]="pageSizeOptions" (ended)="onEnded($event)"
        [displayVolumeControls]="msaapDisplayVolumeControls" [expanded]="true"></mat-advanced-audio-player> 

TS

import { Track } from 'ngx-audio-player';   
   
.   
.   

msaapDisplayTitle = true;
msaapDisplayPlayList = true;
msaapPageSizeOptions = [2,4,6];
msaapDisplayVolumeControls = true;
   
// Material Style Advance Audio Player Playlist
msaapPlaylist: Track[] = [
  {
    title: 'Audio One Title',
    link: 'Link to Audio One URL'
  },
  {
    title: 'Audio Two Title',
    link: 'Link to Audio Two URL'
  },
  {
    title: 'Audio Three Title',
    link: 'Link to Audio Three URL'
  },
];

Properties

Name	Description	Type	Default Value
@Input() playlist: Track[];	playlist containing array of title and link	mandatory	None
@Input() autoPlay: false;	true - if the audio needs to be played automaticlly	optional	false
@Input() displayTitle: true;	false - if the audio title needs to be hidden	optional	true
@Input() displayPlaylist: true;	false - if the playlist needs to be hidden	optional	true
@Input() pageSizeOptions = [10, 20, 30];	number of items to be displayed in the playlist	optional	[10,20,30]
@Input() expanded = true;	false - if the playlist needs to be minimized	optional	true
@Input() displayVolumeControls = true;	false - if the volume controls needs to be hidden	optional	true
@Output() ended: Subject;	Callback method thats triggers once the track ends	optional	- N.A -

Versioning

ngx-audio-player will be maintained under the Semantic Versioning guidelines. Releases will be numbered with the following format:

<major>.<minor>.<patch>

For more information on SemVer, please visit http://semver.org.

Developer

Vijayendra Mudigal

• Profile
• GitHub
• Linkedin

License

The MIT License (MIT)

Donate

If you like my work you can buy me a 🍺 or 🍕