Press "Enter" to skip to content

Library For Playing Audio With HTML 5 Angular 7/8/9/10

ngx audio player is a simple, clean, and responsive player to play multiple audios with playlist support. This library is for audio loading and playing with HTML 5 for Angular 7/8/9/10/11.

audio player in angular, angular audio player example, play audio in angular 8, angular music player github, angular play audio in background, angular audio player npm

How to make use of it:

Installation

Using npm:
$ npm install ngx-audio-player --save

Using yarn:
$ yarn add ngx-audio-player

Import NgxAudioPlayerModule in the root module(AppModule):

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

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

Usage

<ngx-audio-player
="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> 
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

NameDescriptionTypeDefault Value
@Input() playlist: Track[];playlist containing array of title and linkmandatoryNone
@Input() autoPlay: false;true – if the audio needs to be played automaticllyoptionalfalse
@Input() displayTitle: true;false – if the audio title needs to be hiddenoptionaltrue
@Input() displayPlaylist: true;false – if the playlist needs to be hiddenoptionaltrue
@Input() pageSizeOptions = [10, 20, 30];number of items to be displayed in the playlistoptional[10,20,30]
@Input() expanded = true;false – if the playlist needs to be minimizedoptionaltrue
@Input() displayVolumeControls = true;false – if the volume controls needs to be hiddenoptionaltrue
@Input() displayRepeatControls = true;false – if the repeat controls needs to be hiddenoptionaltrue
@Input() displayArtist = false;true – if the artist data is to be shownoptionalfalse
@Input() displayDuration = false;true – if the track duration is to be shownoptionalfalse
@Output() trackEnded: SubjectCallback method that triggers once the track endsoptional– N.A –
@Input() startOffset = 0;offset from start of audio file in secondsoptional0
@Input() endOffset = 0;offset from end of audio file in secondsoptional0
@Input() disablePositionSlider = false;true – if the position slider needs to be disabledoptionalfalse

ngx audio player Plugin/Github, angular 10 audio player, ngx audio player


See Demo And Download

Official Website(vmudigal): Click Here

This superior jQuery/javascript plugin is developed by vmudigal. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.