Angular Music / Audio Player

Angular Music/Audio Player component for web applications. Easy and HIGHLY customisable. Stackblitz example

Getting Started

Installation

• Install the package :

npm install ang-music-player --save

• Once installed import AngMusicPlayerModule from the installed package into your module as follows:

Usage

Import AngMusicPlayerModule into NgModule in app.module.ts.

import { AngMusicPlayerModule } from  'ang-music-player';

import { CommonModule } from  '@angular/common';

@NgModule({
// ...
imports: [

AngMusicPlayerModule,

CommonModule
  ]
// ...
})

Add the following component tag in you template (no properties)

<ang-music-player [audioList] = audioList></ang-music-player>

audioList is an array of objects

  audioList = [
    {
      url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
      title: "Smaple 1",
      cover: "https://i1.sndcdn.com/artworks-000249294066-uow7s0-t500x500.jpg"
    },
    {
      url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-10.mp3",
      title: "Sample 2",
      cover: "https://i1.sndcdn.com/artworks-000249294066-uow7s0-t500x500.jpg"
    },
    {
      url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-12.mp3",
      title: "Sample 3",
      cover: "https://i1.sndcdn.com/artworks-000249294066-uow7s0-t500x500.jpg"
    }
  ];

Properties

The following list of properties are supported by the component.

Property	Type	Description	Default Value
width	String	Width of the audio player	500px
height	String	Height of the audio players	true
backgroundColor	String	Background color of the audio player	#000000
audioTimeColor	String	Audio time color	rgb(76, 130, 175)
audioTitleColor	String	Audio title color	rgb(76, 130, 175)
timeSliderColor	String	Audio time slider color	#fffff
volumeSliderColor	String	Volume slider color	#fffff
playButtonColor	String	Color of play button	rgb(76, 130, 175)
pauseButtonColor	String	Color of pause button	rgb(76, 130, 175)
nextButtonColor	String	Color of next button	rgb(76, 130, 175)
previousButtonColor	String	Color of previous button	rgb(76, 130, 175)
repeatButtonColor	String	Color of repeat button	rgb(76, 130, 175)
activeRepeatButtonColor	String	Color of active repeat button	green
volumeButtonColor	String	Color of volume button	rgb(76, 130, 175)
muteButtonColor	String	Color of mute button	rgb(76, 130, 175)
playEvent	Event	Play button click event
pauseEvent	Event	Pause button click event
nextEvent	Event	Next button click event
previousEvent	Event	Previous button click event
repeatEvent	Event	Repeat button click event
seekEvent	Event	Seek Audio event

This project was generated with Angular CLI version 8.2.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

TODO

Shuffle option

audio list option

License

MIT License.