useAudio

Subscribes to system audio information streamed from the Fluxlay desktop app. Useful for building audio visualizers and music-reactive wallpapers.

Import

import { useAudio } from "@fluxlay/react";

Signature

function useAudio(options?: AudioOptions): AudioInfo;

Parameters

AudioOptions

Property	Type	Default	Description
`numBands`	`number`	`32`	Number of frequency spectrum bands.

Return Value

Property	Type	Description
`rms`	`number`	RMS (Root Mean Square) volume level (0.0 – 1.0). Represents perceived loudness.
`peak`	`number`	Peak volume level (0.0 – 1.0). The maximum amplitude in the current frame.
`spectrum`	`number[]`	Frequency spectrum split into bands on a logarithmic scale (0.0 – 1.0 each). The number of bands is configurable via `numBands`.

Returns { rms: 0, peak: 0, spectrum: [] } until the first event is received.

Example

function Wallpaper() {
  const { rms, peak, spectrum } = useAudio({ numBands: 64 });
 
  return (
    <div style={{ display: "flex", alignItems: "flex-end", height: "100vh" }}>
      {spectrum.map((value, i) => (
        <div
          key={i}
          style={{
            flex: 1,
            height: `${value * 100}%`,
            backgroundColor: `hsl(${(i / spectrum.length) * 280}, 80%, 60%)`
          }}
        />
      ))}
    </div>
  );
}

Combining with useProperties

Combine with useProperties to let end users adjust the number of bands.

function Wallpaper() {
  const props = useProperties();
  const { spectrum } = useAudio({ numBands: props.numBands as number });
  // ...
}

Notes

Audio data is streamed at approximately 30 fps.
The spectrum uses A-weighting (IEC 61672) so that the frequency balance matches human hearing perception.
Audio capture starts when the first subscriber connects and stops when all subscribers disconnect.
Requires "Screen Recording & System Audio Recording" permission on macOS (System Settings > Privacy & Security > Screen Recording).
This hook only works inside the Fluxlay desktop app. In a normal browser, it returns the initial zero values.
When options values change, the stream is automatically reconnected.