You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

ngx-audio-player

Package Overview
Dependencies
5
Maintainers
1
Versions
64
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-audio-player

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


Version published
Maintainers
1
Created

Readme

Source

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

npm npm version Downloads licence Support 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": "^12.0.0"
"@angular/common": "^12.0.0"
"@angular/material": "^12.0.0"
"rxjs": "^6.6.0"

Import NgxAudioPlayerModule in the root module(AppModule):

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

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

Usage

Simple Audio Player
HTML
<ngx-audio-player [autoPlay]="false" muted="muted"
    
  [playlist]="mssapPlaylist"
  [disablePositionSlider]="mssapDisablePositionSlider"
  [displayRepeatControls]="mssapDisplayRepeatControls"
  [displayVolumeControls]="mssapDisplayVolumeControls"
  [displayVolumeSlider]="mssapDisplayVolumeSlider"

  [displayTitle]="mssapDisplayTitle"
  
  (trackEnded)="onEnded($event)">

</ngx-audio-player> 
TS
import { Track } from 'ngx-audio-player';   
   
.   
.   

mssapDisplayTitle = true;
mssapDisablePositionSlider = true;
mssapDisplayRepeatControls = true;
mssapDisplayVolumeControls = true;
mssapDisplayVolumeSlider = false;
   
// Material Style Simple Audio Player
mssapPlaylist: Track[] = [
  {
    title: 'Audio Title',
    link: 'Link to Audio URL',
    artist: 'Audio Artist',
    duration: 'Audio Duration in seconds'
  }
];

// For Streaming Audio From URL 
// set mediaType = 'stream' 
mssapPlaylist: Track[] = [
  {
    title: 'Audio Title',
    link: 'Link to Streaming URL',
    mediaType: 'stream'
  }
];
Advanced Audio Player
HTML
<ngx-audio-player [autoPlay]="false" muted="muted"

    [playlist]="msaapPlaylist"
    [disablePositionSlider]="msaapDisablePositionSlider"
    [displayRepeatControls]="msaapDisplayRepeatControls"
    [displayVolumeControls]="msaapDisplayVolumeControls"
    [displayVolumeSlider]="msaapDisplayVolumeSlider"
    
    [displayTitle]="msaapDisplayTitle"

    [displayPlaylist]="msaapDisplayPlayList"
    [pageSizeOptions]="msaapPageSizeOptions"

    [tableHeader]="msaapTableHeader"
    [titleHeader]="msaapTitleHeader"
    [artistHeader]="msaapArtistHeader"
    [durationHeader]="msaapDurationHeader"

    [displayArtist]="msaapDisplayArtist"
    [displayDuration]="msaapDisplayDuration"
    [expanded]="true"

    (trackPlaying)="onTrackPlaying($event)"
    (trackPaused)="onTrackPaused($event)"
    (trackEnded)="onEnded($event)"
    (nextTrackRequested)="onNextTrackRequested($event)"
    (previousTrackRequested)="onPreviousTrackRequested($event)"
    (trackSelected)="onTrackSelected($event)">

</ngx-audio-player>
TS
import { Track } from 'ngx-audio-player';   
   
.   
.   

// Main Player Controls
msaapDisplayPlayList = true;
msaapDisablePositionSlider = true;
msaapDisplayRepeatControls = true;
msaapDisplayVolumeControls = true;
msaapDisplayVolumeSlider = false;

// Title Marquee
msaapDisplayTitle = true;

// Playlist Controls
msaapPageSizeOptions = [2,4,6];
msaapDisplayArtist = false;
msaapDisplayDuration = false;

// For Localisation
msaapTableHeader = 'My Playlist';
msaapTitleHeader = 'My Title';
msaapArtistHeader = 'My Artist';
msaapDurationHeader = 'My Duration';


// Material Style Advance Audio Player Playlist
msaapPlaylist: Track[] = [
    {
        title: 'Audio One Title',
        link: 'Link to Audio One URL',
        artist: 'Artist',
        duration: 'Duration'
    },
    {
        title: 'Audio Two Title',
        link: 'Link to Audio Two URL',
        artist: 'Artist',
        duration: 'Duration'
    },
    {
        title: 'Audio Three Title',
        link: 'Link to Audio Three URL',
        artist: 'Artist',
        duration: 'Duration'
    },
];

// Callback Events

onTrackPlaying(event) {
    console.log(event);
    // your logic which needs to
    // be triggered once the
    // track ends goes here.
}


onTrackPaused(event) {
    console.log(event);
    // your logic which needs to
    // be triggered once the
    // track ends goes here.
}

onEnded(event) {
    console.log(event);
    // your logic which needs to
    // be triggered once the
    // track ends goes here.
}

onNextTrackRequested(event) {
    console.log(event);
    // your logic which needs to
    // be triggered once the
    // track ends goes here.
}


onPreviousTrackRequested(event) {
    console.log(event);
    // your logic which needs to
    // be triggered once the
    // track ends goes here.
}

onTrackSelected(event) {
    console.log(event);
    // your logic which needs to
    // be triggered once the
    // track ends goes here.
}
Properties
NameDescriptionType
@Input() playlist: Track[];playlist containing array of title and linkmandatory
@Input() autoPlay: false;true - if the audio needs to be played automaticllyoptional
Player Controls
@Input() startOffset = 0;offset from start of audio file in secondsoptional
@Input() endOffset = 0;offset from end of audio file in secondsoptional
@Input() disablePositionSlider = false;true - if the position slider needs to be disabledoptional
@Input() displayRepeatControls = true;false - if the repeat controls needs to be hiddenoptional
@Input() repeat: "all""one""none" = 'all';
@Input() displayVolumeControls = true;false - if the volume controls needs to be hiddenoptional
@Input() displayVolumeSlider = true;true - if the volume slider should be shownoptional
Title Marquee Control
@Input() displayTitle: true;false - if the audio title needs to be hiddenoptional
Playlist Controls
@Input() displayPlaylist: true;false - if the playlist needs to be hiddenoptional
@Input() pageSizeOptions = [10, 20, 30];number of items to be displayed in the playlistoptional
@Input() expanded = true;false - if the playlist needs to be minimizedoptional
@Input() displayArtist = false;true - if the artist data is to be shownoptional
@Input() displayDuration = false;true - if the track duration is to be shownoptional
Localisation Controls
@Input() tableHeader = 'Playlist';localised stringoptional
@Input() titleHeader = 'Title';localised stringoptional
@Input() artistHeader = 'Artist';localised stringoptional
@Input() durationHeader = 'Duration';localised stringoptional
Callback Events
@Output() trackPlaying: EventEmittertriggers when the track starts playingoptional
@Output() trackPaused: EventEmitterCallback method that triggers once the track endsoptional
@Output() trackEnded: EventEmitterCallback method that triggers once the track endsoptional
@Output() nextTrackRequested: EventEmitterCallback method that triggers once the track endsoptional
@Output() previousTrackRequested: EventEmitterCallback method that triggers once the track endsoptional
@Output() trackSelected: EventEmitterCallback method that triggers once the track endsoptional

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

💻

AnwarTuha

💻

Bogdan Baghiu

💻

Kareem Jeiroudi

💻

Misc

License

The MIT License (MIT)

Donate

If you like my work you can buy me a :beer: or :pizza:

Donate

Keywords

FAQs

Package last updated on 26 Sep 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc