React to Audio

Use useAudio() to subscribe to real-time volume and frequency spectrum from system audio output.

Basic usage

import { useAudio } from "@fluxlay/react";
 
function Wallpaper() {
  const { rms } = useAudio();
 
  return (
    <div
      style={{
        width: "100vw",
        height: "100vh",
        backgroundColor: `hsl(280, 80%, ${rms * 100}%)`
      }}
    />
  );
}

rms is the perceived loudness in the range 0.0 – 1.0. Map it to brightness, scale, or any other visual parameter.

Render a spectrum bar visualizer

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

Adjust the band count via numBands (default is 32).

macOS permissions

On macOS, you'll be prompted to allow "Screen & System Audio Recording" the first time you use audio capture. Enable Fluxlay under System Settings > Privacy & Security > Screen Recording.

Notes

• Audio data streams at roughly 30fps.
• Returns { rms: 0, peak: 0, spectrum: [] } until the first sample arrives.
• Only works inside the Fluxlay desktop app.

See the useAudio Reference for full API details.