# useAudio

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

## Import

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

## Signature

```tsx
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

```tsx
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.

```tsx
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.