A library for loading and playing audio using HTML 5 for Angular 7/8/9/10.
(https://vmudigal.github.io/ngx-audio-player/)
Table of contents
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": "^10.0.0"
"@angular/common": "^10.0.0"
"@angular/material": "^10.0.0"
"rxjs": "^6.5.5"
Import NgxAudioPlayerModule
in in the root module(AppModule
):
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" (trackEnded)="onEnded($event)"
[displayTitle]="msbapDisplayTitle" [displayVolumeControls]="msaapDisplayVolumeControls"
[disablePositionSlider]="msbapDisablePositionSlider"></mat-basic-audio-player>
TS
msbapAudioUrl = 'Link to audio URL';
msbapTitle = 'Audio Title';
msbapDisplayTitle = false;
msbapDisplayVolumeControls = true;
msbapDisablePositionSlider = 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() trackEnded: 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 |
@Input() disablePositionSlider = false; | true - if the position slider needs to be disabled | optional | false |
Material Style Advanced Audio Player
HTML
<mat-advanced-audio-player [playlist]="msaapPlaylist" [displayTitle]="msaapDisplayTitle" [autoPlay]="false"
muted="muted" [displayPlaylist]="msaapDisplayPlayList" [pageSizeOptions]="pageSizeOptions" (trackEnded)="onEnded($event)"
[displayVolumeControls]="msaapDisplayVolumeControls" [disablePositionSlider]="msaapDisablePositionSlider"
[expanded]="true"></mat-advanced-audio-player>
TS
import { Track } from 'ngx-audio-player';
.
.
msaapDisplayTitle = true;
msaapDisplayPlayList = true;
msaapPageSizeOptions = [2,4,6];
msaapDisplayVolumeControls = true;
msaapDisablePositionSlider = true;
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() trackEnded: 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 |
@Input() disablePositionSlider = false; | true - if the position slider needs to be disabled | optional | false |
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
Contributors ✨
Thanks goes to these wonderful people:
Misc
License
The MIT License (MIT)
Donate
If you like my work you can buy me a :beer: or :pizza: