Awesome

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

Demo
Installation
Getting Started
Usage
Versioning
Contributors
License

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:

$ 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": "^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):

// 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<string>	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.

Contributors ✨

Thanks goes to these wonderful people:

<table align="center"> <tr> <td align="center"><a href="https://github.com/EdricChan03"><img src="https://avatars.githubusercontent.com/u/20047125?v=4" width="100px;" alt=""/> Edric Chan</a> <a href="https://github.com/vmudigal/ngx-audio-player/commits?author=EdricChan03" title="Code">💻</a></td> <td align="center"><a href="https://github.com/RokiFoki"><img src="https://avatars3.githubusercontent.com/u/9476596?v=4" width="100px;" alt=""/> RokiFoki</a> <a href="https://github.com/vmudigal/ngx-audio-player/commits?author=RokiFoki" title="Code">💻</a></td> <td align="center"><a href="https://github.com/ewwwgiddings"><img src="https://avatars.githubusercontent.com/u/26286559?v=4" width="100px;" alt=""/> ewwwgiddings</a> <a href="https://github.com/vmudigal/ngx-audio-player/commits?author=ewwwgiddings" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/cicsolutions"><img src="https://avatars1.githubusercontent.com/u/5200361?v=4" width="100px;" alt=""/> Caleb Crosby</a> <a href="https://github.com/vmudigal/ngx-audio-player/commits?author=cicsolutions" title="Code">💻</a></td> <td align="center"><a href="https://github.com/6utt3rfly"><img src="https://avatars1.githubusercontent.com/u/17912877?v=4" width="100px;" alt=""/> Shelly</a> <a href="https://github.com/vmudigal/ngx-audio-player/commits?author=6utt3rfly" title="Code">💻</a></td> <td align="center"><a href="https://github.com/Urinprobe"><img src="https://avatars1.githubusercontent.com/u/22059384?v=4" width="100px;" alt=""/> Simon Reinsch</a> <a href="https://github.com/vmudigal/ngx-audio-player/commits?author=Urinprobe" title="Code">💻</a></td> </tr> </table>

Awesome

Table of contents

Demo

Installation

Getting Started

Usage

HTML

TS

Properties

Versioning

Contributors ✨

Misc

License

The MIT License (MIT)

Donate