Angular 13 ngx-audio-player Example to Play Audio Files From URL in Audio Player With Controls in Browser Using TypeScript

 

 

 

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

Travis-CI npm npm version Downloads licence Support Support Support Support Support

Table of contents

Demo

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

alt tag

Working Demo

Installation

ngx-audio-player is available via npm and yarn

Using npm:

Using yarn:

Getting Started

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

“@angular/core”: “^11.0.0”
“@angular/common”: “^11.0.0”
“@angular/material”: “^11.0.0”
“rxjs”: “^6.6.3”

Import NgxAudioPlayerModule in in the root module(AppModule):

Usage

HTML


TS
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
@Input() displayRepeatControls = true; false – if the repeat controls needs to be hidden optional true
@Input() displayArtist = false; true – if the artist data is to be shown optional false
@Input() displayDuration = false; true – if the track duration is to be shown optional false
@Output() trackEnded: Subject Callback method that 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

 

Leave a Reply