Skip to content

vmudigal/ngx-audio-player

 
 

Repository files navigation

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:

$ 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 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:


Edric Chan

πŸ’»

RokiFoki

πŸ’»

ewwwgiddings

πŸ“–

Caleb Crosby

πŸ’»

Shelly

πŸ’»

Simon Reinsch

πŸ’»

Misc

License

The MIT License (MIT)

Donate

If you like my work you can buy me a 🍺 or πŸ•

Donate

About

A library for playing audio using HTML 5 audio for Angular 7/8/9/10/11.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 49.3%
  • HTML 36.3%
  • SCSS 6.7%
  • CSS 5.0%
  • JavaScript 2.7%