# React to Audio

Use `useAudio()` to subscribe to real-time volume and frequency spectrum from system audio output.

## Basic usage

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

function Wallpaper() {
  const { rms } = useAudio();

  return (
    <div
      style={{
        width: "100vw",
        height: "100vh",
        backgroundColor: `hsl(280, 80%, ${rms * 100}%)`
      }}
    />
  );
}
```

`rms` is the perceived loudness in the range 0.0 – 1.0. Map it to brightness, scale, or any other visual parameter.

## Render a spectrum bar visualizer

```tsx
function Visualizer() {
  const { 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>
  );
}
```

Adjust the band count via `numBands` (default is 32).

## macOS permissions

On macOS, you'll be prompted to allow "Screen & System Audio Recording" the first time you use audio capture. Enable Fluxlay under **System Settings > Privacy & Security > Screen Recording**.

## Notes

- Audio data streams at roughly 30fps.
- Returns `{ rms: 0, peak: 0, spectrum: [] }` until the first sample arrives.
- Only works inside the Fluxlay desktop app.

See the [useAudio Reference](/en/studio/developer/reference/sdk/use-audio.md) for full API details.