react-pre-hooksuseAudioAnalyser
This hook uses and audio analyser to create and an audio visualizer from a media element (audio/video) or the user microphone.
Parameters
- a function that handles the byte frequecy data of the audio, this function takes two arguments, the data array which is a Uint8Array, and the current AnalyserNode, so the API will be:
(dataArray, node) => any. - and some options:
| Name | Type | Description |
|---|---|---|
| fftSize | Number | the window size of the FFT, Must be a power of 2 between 2^5 and 2^15 (default is 2^11 = 2048), see fftSize property. |
Return Values
| Name | Type | Description |
|---|---|---|
| node | Object | the current AnalyserNode reference. |
| context | Object | the current AudioContext reference. |
| connect | Function | connect any audio/video element, or a MediaStream object. |
| error | Unknown | cached error if it exists. |
TIP
You should set crossOrigin to anonymous if you're trying to use the analyser node with an audio element to avoid the CORS access restrictions:
tsx
<audio src="/path/to/audio" crossOrigin="anonymous" /><audio src="/path/to/audio" crossOrigin="anonymous" />Example Usage
tsx
import { useAudioAnalyser } from 'react-pre-hooks';
export default function Example() {
const analyser = useAudioAnalyser(
dataArray => {
// Draw a bar visualizer
const canvas = document.querySelector('canvas');
if (!canvas) return;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
const maxDataValue = Math.max(...dataArray);
const barWidth = Math.ceil(canvas.width / dataArray.length) * 1.4;
dataArray.forEach((value, index) => {
const barHeight = (value / maxDataValue) * canvas.height;
const x = index * barWidth * 2;
const y = canvas.height - barHeight;
ctx.fillStyle = '#00cde0';
ctx.fillRect(x, y, barWidth, barHeight);
});
},
{ fftSize: 2048 }
);
return (
<main>
<canvas />
<audio
src="/sound.mp3"
crossOrigin="anonymous"
onCanPlay={e => analyser.connect(e.currentTarget)}
controls
/>
</main>
);
}import { useAudioAnalyser } from 'react-pre-hooks';
export default function Example() {
const analyser = useAudioAnalyser(
dataArray => {
// Draw a bar visualizer
const canvas = document.querySelector('canvas');
if (!canvas) return;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
const maxDataValue = Math.max(...dataArray);
const barWidth = Math.ceil(canvas.width / dataArray.length) * 1.4;
dataArray.forEach((value, index) => {
const barHeight = (value / maxDataValue) * canvas.height;
const x = index * barWidth * 2;
const y = canvas.height - barHeight;
ctx.fillStyle = '#00cde0';
ctx.fillRect(x, y, barWidth, barHeight);
});
},
{ fftSize: 2048 }
);
return (
<main>
<canvas />
<audio
src="/sound.mp3"
crossOrigin="anonymous"
onCanPlay={e => analyser.connect(e.currentTarget)}
controls
/>
</main>
);
}