laif-ds/dist/agent-docs/components/AudioVisualizer.md

Design System di Laif con componenti React basati su principi di Atomic Design

# AudioVisualizer

## Overview

Canvas-based audio waveform visualizer for a MediaStream. Starts/stops with `isRecording` and resizes responsively.

---

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `stream` | `MediaStream | null` | Input audio stream |
| `isRecording` | `boolean` | Whether to render visualization |
| `onClick` | `() => void` | Click handler (e.g., to toggle state) |

---

## Example

```tsx
import { useEffect, useState } from "react";
import { AudioVisualizer } from "laif-ds";

export function MicVisualizer() {
  const [stream, setStream] = useState<MediaStream | null>(null);
  const [isRecording, setIsRecording] = useState(false);

  useEffect(() => {
    navigator.mediaDevices.getUserMedia({ audio: true }).then(setStream);
  }, []);

  return (
    <AudioVisualizer
      stream={stream}
      isRecording={isRecording}
      onClick={() => setIsRecording((v) => !v)}
    />
  );
}
```