audiocnSolid

useFrameSource

Subscribe a callback to a frame source, with a stable callback and automatic cleanup.

Every audiocn meter and visualizer uses this hook for its source prop. Use it to build your own components on any frame source.

$ pnpm dlx shadcn@latest add @audiocn-solid/use-frame-source

Usage

import { useFrameSource } from "@/hooks/use-frame-source";
import { dbToLevel } from "@/lib/audio/decibels";
import type { FrameSource, MeterFrame } from "@/lib/audio/types";

export const TinyMeter = ({ source }: { source: FrameSource<MeterFrame> }) => {
  let barRef!: HTMLDivElement;

  useFrameSource(source, (frame) => {
    const level = dbToLevel(frame.channels[0]?.peakDb ?? -Infinity);
    barRef.style.setProperty("--level", String(level));
  });

  return (
    <div class="h-2 w-40 rounded-full bg-muted">
      <div
        class="h-full origin-left scale-x-(--level) rounded-full bg-primary"
        ref={barRef}
      />
    </div>
  );
};

The callback runs outside Solid rendering, so it can update the DOM on every frame without re-rendering.

API

Prop

Type