ng-openaudio
TypeScript icon, indicating that this package has built-in type declarations

0.0.8 • Public • Published

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

To-Do / Improvements

  • Queue for songs
    • add next/prev feature
    • add loop/random feature
  • add electric wave style
  • add ring bar style
  • add lyrics karaoke style -> DONE

NPM

This package is on npm https://www.npmjs.com/package/ng-openaudio

License

This package is under the MIT license

Dependents (0)

Package Sidebar

Install

npm i ng-openaudio

Weekly Downloads

0

Version

0.0.8

License

MIT

Unpacked Size

459 kB

Total Files

38

Last publish

Collaborators

  • rloris