Ng-openaudio NPM

Openaudio

Openaudio is an Angular library component developped to manipulate audio source and visualize the sound. Openaudio uses flexbox, it's responsive no matter the height and width of the device.

Demo

Try it out here: DEMO or clone this repo and run ng serve for a full demo of openaudio. Angular version 8.

Features

Play an audio source
Visual effects based on audio source frequency (BARS, CIRCULAR) Normalized
Player visual controls available (Play/Pause, seek, volume, switch visual style)
Customize effects (gradient style, accent color, background color, bars amount)
Displays song cover, artist, album, name, lyrics
Add synced (karaoke) or simple lyrics
Play audio stream (radio, podcast)

Some audio source cannot be rendered for visualization, openaudio will still be able to play them !

How to use

First install the package with the command npm i ng-openaudio

Then, in your module.ts, import the library module

import { NgOpenaudioModule } from 'ng-openaudio';

And add it to your imports modules

Then, build a songData object containing the song's name, artist, album, cover image url, audio source url, lyrics

// build a new SongData object
const s = new SongData();
s.audioSourceUrl = 'assets/UnknownBrain_Superhero.mp3';
s.name = 'Superhero';
s.artist = 'Unknown Brain';
s.album = 'No Copyright Song';
s.coverImgUrl = 'assets/ncs_superhero_cover.jpg';
this.mySongData = s;
// choose a visual style or leave it to default
this.visualStyle = EqualizerStyle.CIRCULAR

you can use <ng-openaudio></ng-openaudio> it in any component.html

<ng-openaudio
    [visualContainerHeight]='this.vch'
    [accentColor]='this.accColor'
    [backgroundColor]='this.bgColor'
    [barGradient]='this.gradient'
    [barAmount]='this.barAmount'
    [songData]='this.mySongData'
    [controls]='this.playerControls'
    [visualStyle]='this.visualStyle'
    [volume]='this.volume'
    [playing]='this.playerPlaying'
    [current]='this.currentPosition'
    [showLyrics]='this.showLyrics'
    (statusEvent)='this.statusEvent($event)'
    (errorsEvent)='this.errorEvent($event)'>
</ng-openaudio>

Check out the repo for a full demo code here

Inputs

Property	Type	Note
visualContainerHeight	string	Height of the visual area
accentColor	string	Accent color across the player
backgroundColor	string	Background color across the player
barGradient	string	Gradient style for bars frequency visual
barAmount	number	Amount of bars (min: 0, max: 96) for the bars frequency visual
songData	SongData	Song data containing the name, album, artist, cover image and audio source url (local or distant)
controls	boolean	Enable/disable the visual controls for the user
visualStyle	EqualizerStyle	Specify the visual style for the player (BARS_DOWN, BARS_UP, BARS_MIDDLE, CIRCULAR, COVER)
volume	number	Volume of the player (min: 0, max: 100)
playing	boolean	Specify the player status for the current song (true: play, false: pause)
current	number	Specify the current progress position of the song
showLyrics	boolean	Display the lyrics (synced or simple) if provided in songData

Outputs

Event	Type	Note
(StatusEvent)	StatusEvent	Emits these events (songLoaded: audio source was loaded, volumeChanged: player volume was changed, songEnded: current track has ended, songPaused: the current track was paused, songPlayed: the current track was played, songProgressUpdated: the current track playback position was updated )
(errorEvent)	any	Emits all errors