React Song Visualizer
Fin.mp4
npm install song-vizyarn add song-vizMost 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 AppThis 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| 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 |
MIT © d-e-v-esh
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent