# useAudio

Fluxlay デスクトップアプリからストリーミングされるシステム音声情報をサブスクライブします。オーディオビジュアライザーや音楽に反応する壁紙の構築に使用します。

## インポート

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

## シグネチャ

```tsx
function useAudio(options?: AudioOptions): AudioInfo;
```

## 引数

### AudioOptions

| プロパティ | 型       | デフォルト | 説明                           |
| ---------- | -------- | ---------- | ------------------------------ |
| `numBands` | `number` | `32`       | 周波数スペクトラムのバンド数。 |

## 戻り値

| プロパティ | 型         | 説明                                                                                               |
| ---------- | ---------- | -------------------------------------------------------------------------------------------------- |
| `rms`      | `number`   | RMS（二乗平均平方根）音量レベル（0.0 – 1.0）。体感的な音の大きさを表します。                       |
| `peak`     | `number`   | ピーク音量レベル（0.0 – 1.0）。現在のフレームの最大振幅です。                                      |
| `spectrum` | `number[]` | 対数スケールで分割された周波数スペクトラム（各 0.0 – 1.0）。バンド数は `numBands` で設定可能です。 |

最初のイベントを受信するまで `{ rms: 0, peak: 0, spectrum: [] }` を返します。

## 使用例

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

### useProperties と組み合わせる

`useProperties` と組み合わせることで、エンドユーザーがバンド数を変更できるようになります。

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

## 備考

- 音声データは約 30fps でストリーミングされます。
- スペクトラムには A 特性ウェイティング（IEC 61672）が適用されており、人間の聴覚感度に合ったバランスで表示されます。
- 音声キャプチャは最初のサブスクライバー接続時に開始し、全てのサブスクライバー切断時に停止します。
- macOS では「画面収録とシステムオーディオ録音」権限が必要です（システム設定 > プライバシーとセキュリティ > 画面収録）。
- このフックは Fluxlay デスクトップアプリ内でのみ動作します。通常のブラウザでは初期値のゼロ値を返します。
- `options` の値が変更されると、ストリームが自動的に再接続されます。