Nuclear Powered Macros

    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

    Install

    npm i ng-openaudio

    DownloadsWeekly Downloads

    16

    Version

    0.0.8

    License

    MIT

    Unpacked Size

    459 kB

    Total Files

    38

    Last publish

    Collaborators

    • rloris