useAudio

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

インポート

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

シグネチャ

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: [] } を返します。

使用例

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 と組み合わせることで、エンドユーザーがバンド数を変更できるようになります。

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

備考

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