A library for loading and playing audio using HTML 5 for Angular 14/15/16/17.
(https://github.com/khajegan/ngx-audio-player)

Table of contents

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

Demo

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

Working Demo

Installation

ngx-audio-player is available via npm

Using npm:

$ npm install @khajegan/ngx-audio-player --save

Getting Started

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

"@angular/core": "^17.0.6"
"@angular/common": "^17.0.6"
"@angular/material": "^17.0.4"
"rxjs": "^7.8.0"

Import NgxAudioPlayerModule in the root module(AppModule):

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

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

Usage

HTML

<ngx-audio-player [playlist]="msaapPlaylist" [displayTitle]="msaapDisplayTitle" [autoPlay]="false" 
    muted="muted" [displayPlaylist]="msaapDisplayPlayList" [pageSizeOptions]="pageSizeOptions" (trackEnded)="onEnded($event)"
        [displayVolumeControls]="msaapDisplayVolumeControls" [displayRepeatControls]="msaapDisplayRepeatControls"
        [disablePositionSlider]="msaapDisablePositionSlider" [displayArtist]="msaapDisplayArtist" 
        [displayDuration]="msaapDisplayDuration" [expanded]="true"></ngx-audio-player> 

TS

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

msaapDisplayTitle = true;
msaapDisplayPlayList = true;
msaapPageSizeOptions = [2,4,6];
msaapDisplayVolumeControls = true;
msaapDisplayRepeatControls = true;
msaapDisplayArtist = false;
msaapDisplayDuration = false;
msaapDisablePositionSlider = true;
   
// Material Style Advance Audio Player Playlist
msaapPlaylist: Track[] = [
  {
    title: 'Audio One Title',
    link: 'Link to Audio One URL',
    artist: 'Audio One Artist',
    duration: 'Audio One Duration in seconds'
  },
  {
    title: 'Audio Two Title',
    link: 'Link to Audio Two URL',
    artist: 'Audio Two Artist',
    duration: 'Audio Two Duration in seconds'
  },
  {
    title: 'Audio Three Title',
    link: 'Link to Audio Three URL',
    artist: 'Audio Three Artist',
    duration: 'Audio Three Duration in seconds'
  },
];

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 |

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.

License

The MIT License (MIT)