AudioPlayerNg

Simple audio player for angular 2+

$3

#### Install

``
npm install audio-player-ng --save
`

#### Dependencies

##### fontawesome-free

in angular.json
`
"projects": {
...,
"architect": {
"build": {
"styles": [
"node_modules/@fortawesome/fontawesome-free/css/all.css",
...
],
...
`
or in index.html
`html
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
`

##### Roboto font

in index.html
`html

`


#### Load module

in *.module.ts
`typescript
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {AppComponent} from './app.component';

// import the module
import {AudioPlayerNgModule} from 'audio-player-ng';

@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
HttpClientModule,
AudioPlayerNgModule
],
bootstrap: [AppComponent]
})
export class AppModule {}
`

#### Use in the template
in *.component.html
`html

`

#### Configuration

in *.component.ts
##### properties
- options: a OptionsPlayer interface for config the player
- playlist: a Observable of PlaylistData interface for load the playlist
`
...
import {HttpClient} from "@angular/common/http";
import { Observable } from 'rxjs';
import { OptionsPlayer, PlaylistData } from "audio-player-ng/audio-player-ng/classes/interfaces";

...

export class AppComponent {

options:OptionsPlayer;
playlist:Observable;

constructor(private http:HttpClient) {
this.options = {
width: 300,
oscFillStyle: 'hsl(290, 45%, 49%)',
oscStrokeStyle: 'hsl(110, 100%, 49%)'
};
let path = ""; // the playlist url

this.playlist = this.http.get(path);
}
}
`

##### Interfaces

`
/**
* Options player
*/
export interface OptionsPlayer {

// width of the player
width:number;

// height of the graphics panel, default: 60px
graphicsHeight?:number;

// background-color of the oscilloscope panel
oscFillStyle:string;

// front color of the oscilloscope panel
oscStrokeStyle:string;

// background-color of the chartbar panel, default: "oscFillStyle"
freqFillStyle?:string;

// front color of the chartbar panel, default: "oscStrokeStyle"
freqStrokeStyle?:string;

// number of the of the bars of the chartbar panel, default: 32
freqBars?:number;

// the values of playlist position are the flex-direction values:
// column-reverse (top), row (right), column (bottom), row-reverse (left);
// default: column (bottom)
playlistPosition?:string;

// load the song duration from metadata, it makes a request for song, default: true
loadDuration?:boolean;
}


/**
* Song data
*/
export interface SongData {

// title of the song
title:string;

// url of the song
url:string;

// group of the song if available
group?:string;

// disc of the song if available
disc?:string;

// duration of the song, if it is not available can be loaded from "options.loadDuration = true"
duration?:number;
}

/**
* Playlist data
*/
export interface PlaylistData {

// title of the playlist or disc
title:string;

// group of the playlist if it is a disc
group?:string;

// the songs, array de SongData objects
songs:SongData[];
}
`


#### Styling

... in progress

Css classes for styling the audio player, set the properties with !important

`
/ ControlsComponent /
.controls-container {
background:

// button color
.nav-control {
color:
}

// volume background color
.bar-volume {
background:
}

// volume bar color
.progress-volume {
background:
}

// timer color
.timer {
background:
color:
}

// tooltip color
.tooltip {
background:
border-color:
color:
}

// active color
.active {

}

}
/ GraphicsComponent /

.oscilloscope {
background:
color:

canvas {
height:
width:
}
}

.frequency {
background:
color:

canvas {
height:
width:
}
}

/ PlayerComponent /


.player-header {
background:
color:

p {
font-family:
}
}

.player-container {
border:

.active {
color:
}

.progress {
height:
}

.progress-expanded {
height:
}

.playlist-cmp {
height:
width:
}

.minimize {
i {
color:
}
}
}

/ PlaylistComponent /

.song-box {
background:
color:
}

.selected-song {
background:
color:
}

.bar-scroll {
background:
}


/ ProgressComponent /

.bar-progress {
background: $background-color-progress;
}

.progress-song {
background:
}

.progress-tooltip {
background:
border-color:
color:
}
``

$3

See the LICENSE file for license rights and limitations (MIT).