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

Return Value

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.