Nuclear Powered Macros

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

    0.0.8 • Public • Published


    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.


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


    • 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'; = '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


    Check out the repo for a full demo code here


    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


    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


    This package is on npm


    This package is under the MIT license


    npm i ng-openaudio

    DownloadsWeekly Downloads






    Unpacked Size

    459 kB

    Total Files


    Last publish


    • rloris