FLUXLAY

音声に反応する壁紙

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

基本的な使い方

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

スペクトラムバーの描画

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 リファレンスを参照してください。