Nixon's Pants Missing

    song-viz

    1.0.6 • Public • Published

    song-viz

    React Song Visualizer

    https://user-images.githubusercontent.com/59534570/147430697-01fb9d2d-e58d-41a7-aa19-73458cbfa4ae.mp4

    NPM JavaScript Style Guide

    Install

    npm

    npm install song-viz

    yarn

    yarn add song-viz

    Usage

    Most of the props in this component have default values so you can get started with just the essential props:

    import React, { useRef } from 'react'
    import songFile from './songAudio.wav'
    import imageFile from './img/imageFile.jpg'
    import { RecordDisk } from 'song-viz'
    
    const App = () => {
      const audioRef = useRef()
      return (
        <div>
          <RecordDisk audioRef={audioRef} centerImageSrc={imageFile} />
          <audio src={songFile} controls ref={audioRef} />
        </div>
      )
    }
    
    export default App

    This component with all the props looks like this:

    import React, { useRef } from 'react'
    import songFile from './songAudio.wav'
    import imageFile from './img/imageFile.jpg'
    import { RecordDisk } from 'song-viz'
    
    const App = () => {
      const audioRef = useRef()
      return (
        <div>
          <RecordDisk
            audioRef={audioRef}
            centerImageSrc={imageFile}
            rotation={true}
            bounceMultiplier={0.5}
            bars={200}
            barWidth={4}
            barHeightMultiplier={1}
            barColor={{
              // Either add one/two colors
              colorTwo: 'rgba(255,97,45,255)',
              colorOne: 'rgba(253,235,184,255)',
    
              // Or Add HSL Values, do not add both
              hslColor: [2, 100, 50]
            }}
            circleProps={{ circleWidth: 12, circleColor: 'black' }}
            centerColor='red'
            canvasBackground='white'
            baseRadiusValue={100}
            fftSizeValue={2048}
            smoothingTimeConstant={0.8}
    				canvasWidth = {1200},
      			canvasHeight = {1000}
          />
    
          <audio src={songFile} controls ref={audioRef} />
        </div>
      )
    }
    
    export default App

    Props and Default Values

    property description type default isRequired
    audioRef Ref of the audio player which is made with useRef hook useRef object - true
    centerImageSrc Import name of the image that will be placed in the circle image - false
    rotation Controls whether the center image will rotate or not boolean true false
    bounceMultiplier Controls the how much the circle will bounce number 1 false
    bars Number of bars that will appear on the circle number 200 false
    barWidth Width of the bar number 4 false
    barHeightMultiplier Controls the height of the bars number 1 false
    barColor The color of the bars that will visualize the frequencies object { hslColor: [2, 100, 50] } false
    circleProps Props of the circle on which the bars will appear object { circleWidth: 4, circleColor: 'black' } false
    centerColor Color of the circle if no image is provided string (color) 'white' false
    canvasBackground Background color behind the visualizer string (color) 'white' false
    baseRadiusValue Minimum radius of the center circle number 150 false
    fftSizeValue Must be a power of 2 between 2^5 and 2^15. number 512 false
    smoothingTimeConstant Smoothness of the bar visualization. number (0-1) 0.8 false
    canvasWidth Width of the canvas number 1200 false
    canvasHeight Height of the canvas number 1000 false

    License

    MIT © d-e-v-esh

    Install

    npm i song-viz

    DownloadsWeekly Downloads

    0

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    304 kB

    Total Files

    7

    Last publish

    Collaborators

    • d-e-v-esh