Noticeably Playful Monkeys

    react-music-visualizer

    1.1.0 • Public • Published

    React Music Visualizer

    The intentions of this project is to expose a basic and flexible waveform audio/music visualizer as a modern functional react component. A resizable <Canvas /> component is also exposed.

    Installation

    npm install react-music-visualizer --save
    

    The library is built using hooks so you will need to have react and react-dom version 16.8 or higher.

    Usage

    <Visualizer audioPreviewUrl='example.com/audio-url' />
    

    Example

    More examples on how to use the component can be found in the repo example page. You can run the example page locally by first running npm install and then npm run dev.

    Visualizer Props

    Prop Type Default Notes
    audioPreviewUrl String null ---
    canvasWidth Number null Will resize when viewport is below this number
    canvasHeight Number 540 ---
    drawFunc Function null ---
    drawOptions Object See below ---
    fftSize Number 128 For an explanation check MDN

    Default Drawing Options

    Option Type Default Notes
    canvasColor String '#000000' Background color
    lineColor String '#7200ab' Color of drawn lines
    lineAmount Number 16 Amount of lines to sequentially draw
    strokeWidth Number 3 Width of each line
    strokeTightness Number 5 Space between each line
    mirrored Boolean true If visual peak is centered

    Canvas Props

    Prop Type Default Notes
    height Number null ---
    maxWidth Number 3840 ---
    className String null ---
    ...props Any null Any HTML canvas properties

    Install

    npm i react-music-visualizer

    DownloadsWeekly Downloads

    7

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    13 kB

    Total Files

    7

    Last publish

    Collaborators

    • andeic