ngx-audio-player
    TypeScript icon, indicating that this package has built-in type declarations

    7.2.0 • Public • Published

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

    Travis-CI npm npm version Downloads licence 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": "^7.0.0"
    "@angular/common": "^7.0.0"
    "@angular/material": "^7.1.0"
    "rxjs": "^6.5.5"

    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" [disablePositionSlider]="msaapDisablePositionSlider" 
            [expanded]="true"></ngx-audio-player> 
    TS
    import { Track } from 'ngx-audio-player';   
       
    .   
    .   
     
    msaapDisplayTitle = true;
    msaapDisplayPlayList = true;
    msaapPageSizeOptions = [2,4,6];
    msaapDisplayVolumeControls = true;
    msaapDisablePositionSlider = true;
       
    // Material Style Advance Audio Player Playlist
    msaapPlaylistTrack[] = [
      {
        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.

    Contributors ✨

    Thanks goes to these wonderful people:


    Edric Chan

    💻

    RokiFoki

    💻

    ewwwgiddings

    📖

    Caleb Crosby

    💻

    Misc

    License

    The MIT License (MIT)

    Donate

    If you like my work you can buy me a 🍺 or 🍕

    Donate

    Install

    npm i ngx-audio-player@7.2.0

    Version

    7.2.0

    License

    MIT

    Unpacked Size

    350 kB

    Total Files

    33

    Last publish

    Collaborators

    • mudigal