ngx-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
@Input() startOffset = 0;	offset from start of audio file in seconds	optional	0
@Input() endOffset = 0;	offset from end of audio file in seconds	optional	0

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 -
@Input() startOffset = 0;	offset from start of audio file in seconds	optional	0
@Input() endOffset = 0;	offset from end of audio file in seconds	optional	0

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

Contributors ✨

Thanks goes to these wonderful people:

Edric Chan 💻

RokiFoki 💻

ewwwgiddings 📖

Misc

It is a known limitation of this library that there can only be one instance of it per page. Multiple instances of either the basic or advanced players on one page is not supported at this time.

License

The MIT License (MIT)

Donate

If you like my work you can buy me a :beer: or :pizza: