useAudio

Creates a reactive Link whose value is the frequency response of a connected audio source.

page.tsx

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
import { useAudio } from '@infinityfx/lively/hooks';

export default function Page() {

    const [ref, link] = useAudio({ bands: 8 });

    return <div style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 16,
        alignItems: 'center'
    }}>
        <div style={{
            display: 'flex',
            gap: 8
        }}>
            <Animatable deform={false} animate={{ scale: link((values, i) => `1 ${Math.max(values[i], 0.08)}`) }}>
                {new Array(8).fill(0).map((_, i) => {
                    return <div key={i} style={{
                        width: 8,
                        height: 100,
                        borderRadius: 8,
                        backgroundColor: 'var(--clr-accent)'
                    }} />;
                })}
            </Animatable>
        </div>

        <audio ref={ref} src="/audio/lost-company-22.mp3" controls />
    </div>;
}

Call signature

1 
const [ref, link] = useAudio({ bands, minFrequency, maxFrequency, smoothing })

Parameters

bands?: number

The number of frequency bands to keep track of.
default = 8

minFrequency?: number

The frequency in hertz of the first band.
default = 100

maxFrequency?: number

The frequency in hertz of the last band.
default = 2000

smoothing?: number

A number between 0 and 1, which specifies how much smoothing to apply to the frequency response over time.
default = 0.7