Skip to content

Latest commit

 

History

History
119 lines (92 loc) · 4.97 KB

README.md

File metadata and controls

119 lines (92 loc) · 4.97 KB

song-viz

React Song Visualizer

Fin.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