# 音声に反応する壁紙

`useAudio()` を使ってシステムから出力される音声の音量とスペクトラムをリアルタイムに取得します。

## 基本的な使い方

```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` は 0.0 – 1.0 の体感音量です。背景の明るさやエフェクトの強度にマッピングできます。

## スペクトラムバーの描画

```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>
  );
}
```

`numBands` でバンド数を変更できます（デフォルトは 32）。

## macOS の権限

macOS では初回起動時に「画面収録とシステムオーディオ録音」の許可が必要です。**システム設定 > プライバシーとセキュリティ > 画面収録** から Fluxlay を有効化してください。

## 注意事項

- 音声データは約 30fps でストリーミングされます。
- 最初のサンプルが届くまで `{ rms: 0, peak: 0, spectrum: [] }` を返します。
- Fluxlay デスクトップアプリ内でのみ動作します。

詳細は [useAudio リファレンス](/ja/studio/developer/reference/sdk/use-audio.md)を参照してください。