r3f-equalizer
v1.4.2
Published
r3f-equalizer is a 3d audio equalizer for React built using [@react-three/fiber](https://github.com/pmndrs/react-three-fiber).
Downloads
7
Readme
@react-three/fiber equalizer
r3f-equalizer is a 3d audio equalizer for React built using @react-three/fiber.
Quickstart
npm install r3f-equalizer
r3f-equalizer exports a component Equalizer
(as default), this component receives the following properties:
amplitude
(type:number
) — the amplitude of the volume. Default:1
audio
(type:RefObject<HTMLMediaElement>
) — the HTML element where the audio comes frombackgroundColor
(type:string
) — the color of the background. If it's an empty string, the background will be transparent. Default:""
cubeSideLength
(type:number
) — the side length of the "dancing cubes". Default:0.03
cubeSpacing
(type:number
) — the spacing between the cubes. Default:4.5
cameraFov
(type:number
) — the FOV of the camera. Default:45
cameraPosition
(type:number[3]
) — the position of the camera in the 3d space (which the center is[0, 0, 0]
). Default:[0, 5, 15]
gridCols
(type:number
) — the number of columns of the "dancing cubes" grid. Default:80
gridRows
(type:number
) — the number of rows of the "dancing cubes" grid. Default:12
onCreatedCallback
(type:function
) — function called after the canvas is created. Default:() => {}
Example
import React, { useEffect, useRef } from "react"
import Equalizer from "r3f-equalizer"
function App() {
const audioRef = useRef()
return <>
<audio ref={audioRef} src="..." />
<Equalizer amplitude={5} audio={audioRef} />
</>
}