### Install react-audio-visualize

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/README.md

Install the library using npm.

```sh
npm install react-audio-visualize
```

--------------------------------

### Import LiveAudioVisualizer Utilities and Types

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/module-exports.md

Advanced import example for accessing utility functions and types directly from their respective modules.

```typescript
// Accessing utilities and types (advanced use)
import { calculateBarData as calculateLiveBarData } from 'react-audio-visualize/src/LiveAudioVisualizer/utils';
import type { Props as LiveAudioVisualizerProps } from 'react-audio-visualize/src/LiveAudioVisualizer/LiveAudioVisualizer';
```

--------------------------------

### Advanced LiveAudioVisualizer Configuration

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/api-reference/LiveAudioVisualizer.md

Demonstrates how to configure LiveAudioVisualizer with custom FFT size and smoothing. This example allows users to control audio analysis parameters for visualization.

```typescript
import React, { useState, useRef } from 'react';
import { LiveAudioVisualizer } from 'react-audio-visualize';

export function AdvancedVisualizer() {
  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
  const [fftSize, setFftSize] = useState<32 | 64 | 128 | 256 | 512 | 1024 | 2048 | 4096 | 8192 | 16384 | 32768>(1024);
  const [smoothing, setSmoothing] = useState(0.4);

  const startRecording = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    const recorder = new MediaRecorder(stream);
    setMediaRecorder(recorder);
    recorder.start();
  };

  return (
    <div style={{ padding: '20px' }}>
      <button onClick={startRecording} disabled={mediaRecorder !== null}>
        Start Recording
      </button>

      <div style={{ marginTop: '10px' }}>
        <label>
          FFT Size: 
          <select 
            value={fftSize} 
            onChange={(e) => setFftSize(parseInt(e.target.value) as any)}
            disabled={mediaRecorder !== null}
          >
            <option value={32}>32 (fast, less detail)</option>
            <option value={256}>256</option>
            <option value={1024}>1024 (default)</option>
            <option value={4096}>4096 (detailed, slower)</option>
            <option value={16384}>16384 (very detailed)</option>
          </select>
        </label>
      </div>

      <div style={{ marginTop: '10px' }}>
        <label>
          Smoothing: 
          <input 
            type="range" 
            min="0" 
            max="1" 
            step="0.1" 
            value={smoothing}
            onChange={(e) => setSmoothing(parseFloat(e.target.value))}
          />
          {smoothing.toFixed(1)}
        </label>
      </div>

      {mediaRecorder && (
        <div style={{ marginTop: '20px', border: '1px solid #ccc', padding: '10px' }}>
          <LiveAudioVisualizer
            mediaRecorder={mediaRecorder}
            width="100%"
            height={150}
            barWidth={3}
            gap={2}
            fftSize={fftSize}
            smoothingTimeConstant={smoothing}
            barColor="#ff6b6b"
            backgroundColor="#f5f5f5"
            minDecibels={-100}
            maxDecibels={0}
          />
        </div>
      )}
    </div>
  );
}

```

--------------------------------

### Minimal AudioVisualizer Configuration

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/configuration.md

Basic setup for the AudioVisualizer component, requiring only the audio blob and canvas dimensions.

```typescript
<AudioVisualizer
  blob={audioBlob}
  width={500}
  height={100}
/>
```

--------------------------------

### Live Audio Recorder with Visualization

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/api-reference/LiveAudioVisualizer.md

Demonstrates how to integrate LiveAudioVisualizer with MediaRecorder for real-time audio recording and visualization. Includes controls for starting, stopping, pausing, and resuming the recording.

```typescript
import React, { useState, useRef } from 'react';
import { LiveAudioVisualizer } from 'react-audio-visualize';

export function LiveRecorder() {
  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
  const [isRecording, setIsRecording] = useState(false);
  const audioChunksRef = useRef<Blob[]>([]);

  const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const recorder = new MediaRecorder(stream);
      
      recorder.ondataavailable = (event) => {
        audioChunksRef.current.push(event.data);
      };
      
      recorder.onstart = () => {
        setIsRecording(true);
      };
      
      recorder.onstop = () => {
        setIsRecording(false);
        const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/webm' });
        audioChunksRef.current = [];
        console.log('Recording complete:', audioBlob);
      };
      
      setMediaRecorder(recorder);
      recorder.start();
    } catch (error) {
      console.error('Failed to start recording:', error);
    }
  };

  const stopRecording = () => {
    mediaRecorder?.stop();
  };

  const pauseRecording = () => {
    mediaRecorder?.pause();
  };

  const resumeRecording = () => {
    mediaRecorder?.resume();
  };

  return (
    <div>
      <div>
        <button onClick={startRecording} disabled={mediaRecorder !== null}>
          Start Recording
        </button>
        <button onClick={pauseRecording} disabled={!isRecording}>
          Pause
        </button>
        <button onClick={resumeRecording} disabled={mediaRecorder?.state !== 'paused'}>
          Resume
        </button>
        <button onClick={stopRecording} disabled={mediaRecorder === null}>
          Stop Recording
        </button>
      </div>
      
      {mediaRecorder && (
        <LiveAudioVisualizer
          mediaRecorder={mediaRecorder}
          width={500}
          height={100}
          barWidth={2}
          gap={1}
          barColor="#00ff00"
          backgroundColor="#000000"
        />
      )}
    </div>
  );
}

```

--------------------------------

### Advanced AudioVisualizer with HTML Audio Element

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/api-reference/AudioVisualizer.md

This example demonstrates how to synchronize the AudioVisualizer with an HTML audio element. It handles file input, URL creation, and updates the visualization based on the audio's current playback time. Ensure the audio element is correctly referenced and event listeners are managed.

```typescript
import React, { useState, useRef, useEffect } from 'react';
import { AudioVisualizer } from 'react-audio-visualize';

export function SyncedAudioVisualizer() {
  const [blob, setBlob] = useState<Blob | null>(null);
  const [currentTime, setCurrentTime] = useState(0);
  const audioRef = useRef<HTMLAudioElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const audio = audioRef.current;
    if (!audio) return;

    const updateTime = () => {
      setCurrentTime(audio.currentTime);
    };

    audio.addEventListener('timeupdate', updateTime);
    return () => audio.removeEventListener('timeupdate', updateTime);
  }, []);

  const handleFileInput = (file: File) => {
    setBlob(file);
    if (audioRef.current) {
      audioRef.current.src = URL.createObjectURL(file);
    }
  };

  return (
    <div>
      <input 
        type="file" 
        accept="audio/*" 
        onChange={(e) => e.target.files?.[0] && handleFileInput(e.target.files[0])}
      />
      
      {blob && (
        <>
          <AudioVisualizer
            ref={canvasRef}
            blob={blob}
            width={600}
            height={100}
            barWidth={2}
            gap={1}
            barColor="#808080"
            barPlayedColor="#4169e1"
            currentTime={currentTime}
          />
          <audio 
            ref={audioRef} 
            controls 
            style={{ marginTop: '10px', width: '100%' }}
          />
        </>
      )}
    </div>
  );
}
```

--------------------------------

### AudioVisualizer Usage Example

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/api-reference/AudioVisualizer.md

Demonstrates how to use the AudioVisualizer component in a React application. It includes file input for audio selection and a range slider to control playback time for visualization.

```typescript
import React, { useState, useRef } from 'react';
import { AudioVisualizer } from 'react-audio-visualize';

export function AudioPlayer() {
  const [blob, setBlob] = useState<Blob | null>(null);
  const [currentTime, setCurrentTime] = useState(0);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  const handleFileInput = async (file: File) => {
    setBlob(file);
  };

  return (
    <div>
      <input 
        type="file" 
        accept="audio/*" 
        onChange={(e) => e.target.files?.[0] && handleFileInput(e.target.files[0])}
      />
      
      {blob && (
        <AudioVisualizer
          ref={canvasRef}
          blob={blob}
          width={500}
          height={75}
          barWidth={3}
          gap={2}
          barColor="#c0c0c0"
          barPlayedColor="#0066ff"
          backgroundColor="#ffffff"
          currentTime={currentTime}
        />
      )}
      
      <input 
        type="range" 
        min="0" 
        max="100" 
        value={currentTime}
        onChange={(e) => setCurrentTime(parseFloat(e.target.value))}
      />
    </div>
  );
}

```

--------------------------------

### Real-Time Visualization for MediaRecorder

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/configuration.md

Visualize audio being recorded in real-time by passing a `MediaRecorder` instance to the `LiveAudioVisualizer` component. Ensure the stream is obtained and the recorder is started before rendering.

```typescript
const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);

const startRecording = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const recorder = new MediaRecorder(stream);
  setMediaRecorder(recorder);
  recorder.start();
};

{mediaRecorder && (
  <LiveAudioVisualizer mediaRecorder={mediaRecorder} />
)}
```

--------------------------------

### Responsive Sizing with Container Width

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/configuration.md

Make the AudioVisualizer component responsive by dynamically setting its width based on the parent container's offsetWidth. This example uses a `useEffect` hook to listen for window resize events.

```typescript
const [width, setWidth] = useState(500);

useEffect(() => {
  const handleResize = () => {
    const container = containerRef.current;
    if (container) {
      setWidth(container.offsetWidth);
    }
  };

  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

<AudioVisualizer
  blob={audioBlob}
  width={width}
  height={100}
/>
```

--------------------------------

### Example Usage of dataPoint Type

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/types.md

Demonstrates a typical dataPoint object as obtained from waveform analysis. Ensure amplitude values are within the expected range of -1 to 1.

```typescript
import { dataPoint } from 'react-audio-visualize';

// Typical dataPoint from waveform analysis
const examplePoint: dataPoint = {
  max: 0.45,   // Peak positive amplitude in this segment
  min: -0.38   // Peak negative amplitude in this segment
};
```

--------------------------------

### Main Entry Point

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/REFERENCE_INDEX.md

Import the main components for static or live audio visualization.

```APIDOC
## Main Entry

### Description
Import the primary components for static waveform visualization or real-time frequency visualization.

### Usage
```typescript
import { AudioVisualizer, LiveAudioVisualizer } from 'react-audio-visualize';
```
```

--------------------------------

### Package.json Entry Points Configuration

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/module-exports.md

Defines the main, module, types, and exports for different module systems.

```json
{
  "main": "./dist/react-audio-visualize.umd.js",
  "module": "./dist/react-audio-visualize.es.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/react-audio-visualize.es.js",
      "require": "./dist/react-audio-visualize.umd.js",
      "types": "./dist/index.d.ts"
    }
  }
}
```

--------------------------------

### Minimal LiveAudioVisualizer Configuration

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/configuration.md

Provides the essential `mediaRecorder` prop to initialize the visualizer.

```typescript
<LiveAudioVisualizer
  mediaRecorder={recorder}
/>
```

--------------------------------

### Build Commands for React Audio Visualize

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/module-exports.md

Provides the necessary commands to regenerate the distributed files after source code modifications. This includes compiling TypeScript and bundling/minifying assets using Vite.

```bash
# Compile TypeScript
npm run build

# Includes:
# - tsc (TypeScript compilation)
# - vite build (bundling and minification)
# - vite-plugin-dts (type declaration generation)
```

--------------------------------

### Import Main Components and Utilities from react-audio-visualize

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/REFERENCE_INDEX.md

Import the main visualization components or direct utilities from the library. Use the main entry for recommended imports.

```typescript
// Main entry (recommended)
import { AudioVisualizer, LiveAudioVisualizer } from 'react-audio-visualize';

// Direct utilities (advanced)
import { calculateBarData } from 'react-audio-visualize/src/AudioVisualizer/utils';
```

--------------------------------

### Import Main Exports

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/OVERVIEW.md

Import the AudioVisualizer and LiveAudioVisualizer components from the react-audio-visualize library.

```typescript
import { AudioVisualizer, LiveAudioVisualizer } from 'react-audio-visualize';
```

--------------------------------

### Importing AudioVisualizer Component

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/OVERVIEW.md

Demonstrates how to import the main AudioVisualizer component from the package. Use the main export for standard usage, or the direct bundle export for specific build configurations.

```typescript
import { AudioVisualizer } from 'react-audio-visualize';           // main/types
```

```typescript
import { AudioVisualizer } from 'react-audio-visualize/dist/...';  // direct bundle
```

--------------------------------

### Main Exports

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/OVERVIEW.md

The library exports two main components: `AudioVisualizer` for static audio visualization and `LiveAudioVisualizer` for real-time audio streams.

```APIDOC
## Main Exports

### `AudioVisualizer`

**Purpose:** Visualize static audio blobs as waveforms.

### `LiveAudioVisualizer`

**Purpose:** Real-time visualization of recording streams.
```

--------------------------------

### Fast, Responsive Visualizer Configuration

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/configuration.md

Designed for responsiveness with a smaller FFT size and less smoothing for quick visual feedback. Features thicker bars and more spacing.

```typescript
<LiveAudioVisualizer
  mediaRecorder={recorder}
  width={300}
  height={80}
  barWidth={4}            // Thicker bars
  gap={2}                 // More spacing
  fftSize={256}           // Fast FFT
  minDecibels={-80}       // Narrower range
  maxDecibels={-20}
  smoothingTimeConstant={0.2}  // Less smoothing, more responsive
  barColor="#00ff00"
  backgroundColor="#000000"
/>
```

--------------------------------

### Responsive AudioVisualizer Configuration

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/configuration.md

Dynamically setting AudioVisualizer dimensions and bar styles based on container size for responsive design.

```typescript
// Calculate dimensions based on container
const [containerWidth, setContainerWidth] = useState(500);
const barWidth = containerWidth > 800 ? 2 : 3;
const gap = containerWidth > 800 ? 1 : 0;

<AudioVisualizer
  blob={audioBlob}
  width={containerWidth}
  height={100}
  barWidth={barWidth}
  gap={gap}
/>
```

--------------------------------

### Import AudioVisualizer types from main entry point

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/types.md

All types can be imported from the main entry point of the react-audio-visualize library. Note that 'dataPoint' might require a direct import depending on the library version.

```typescript
import {
  AudioVisualizer,
  LiveAudioVisualizer,
  // Note: dataPoint is not re-exported at top level in version 1.2.0
  // To access it, import directly:
} from 'react-audio-visualize';
```

--------------------------------

### Low-Power Visualization Configuration

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/configuration.md

Aims to reduce CPU usage with a smaller FFT size, suitable for low-power environments. Uses default values for most parameters except those explicitly set.

```typescript
<LiveAudioVisualizer
  mediaRecorder={recorder}
  width={200}
  height={60}
  barWidth={3}
  gap={1}
  fftSize={512}           // Smaller FFT = less CPU
  smoothingTimeConstant={0.6}
  barColor="#999999"
/>
```

--------------------------------

### Balanced LiveAudioVisualizer Configuration

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/configuration.md

Sets common visual and performance-related props for a balanced audio visualization.

```typescript
<LiveAudioVisualizer
  mediaRecorder={recorder}
  width={500}
  height={100}
  barWidth={2}
  gap={1}
  fftSize={1024}
  smoothingTimeConstant={0.4}
  barColor="#4287f5"
  backgroundColor="transparent"
/>
```

--------------------------------

### Optimize LiveAudioVisualizer for Live Streaming

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/configuration.md

For real-time live streaming with limited resources, use a smaller fftSize (e.g., 512) and fewer bars (larger barWidth and gap) to reduce rendering and processing overhead.

```typescript
// For real-time with limited resources
<LiveAudioVisualizer
  mediaRecorder={recorder}
  width={400}
  height={100}
  fftSize={512}       // Smaller FFT window
  barWidth={4}        // Fewer bars to render
  gap={2}
/>
```

--------------------------------

### Full AudioVisualizer Configuration

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/configuration.md

Comprehensive configuration of the AudioVisualizer component, including all visual and playback-related props.

```typescript
<AudioVisualizer
  blob={audioBlob}
  width={600}
  height={150}
  barWidth={3}
  gap={2}
  backgroundColor="#ffffff"
  barColor="#cccccc"
  barPlayedColor="#0066ff"
  currentTime={45.5}
  style={{
    border: '1px solid #999',
    borderRadius: '8px',
    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
    margin: '10px 0'
  }}
  ref={canvasRef}
/>
```

--------------------------------

### AudioVisualizer Flow Diagram

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/OVERVIEW.md

Illustrates the data flow for visualizing static audio files. It covers decoding the audio, extracting data for visualization, and rendering to canvas.

```text
Audio Blob
    ↓
[AudioContext.decodeAudioData()]
    ↓
[AudioBuffer (PCM samples)]
    ↓
[calculateBarData] → Extract min/max per bar
    ↓
[Canvas rendering] → Draw waveform
    ↓
[currentTime] → Color bars by playback progress
```

--------------------------------

### Dynamic Color Theming for AudioVisualizer

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/configuration.md

Implement dynamic theming for the AudioVisualizer component by conditionally setting configuration objects for background and bar colors based on a state variable like `isDarkMode`.

```typescript
const [isDarkMode, setIsDarkMode] = useState(false);

const config = isDarkMode
  ? {
      backgroundColor: '#1e1e1e',
      barColor: '#00ff00',
      barPlayedColor: '#ffff00'
    }
  : {
      backgroundColor: '#ffffff',
      barColor: '#cccccc',
      barPlayedColor: '#0066ff'
    };

<AudioVisualizer
  blob={audioBlob}
  width={500}
  height={100}
  {...config}
/>
```

--------------------------------

### LiveAudioVisualizer Flow Diagram

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/OVERVIEW.md

Details the process for visualizing live audio streams. It involves capturing media, performing FFT analysis, and updating the visualization in real-time.

```text
MediaRecorder.stream
    ↓
[MediaStreamAudioSourceNode] → Connect to analyser
    ↓
[AnalyserNode.getByteFrequencyData()] → FFT analysis
    ↓
[calculateBarData] → Group bins into bars
    ↓
[Canvas rendering] → Draw frequency spectrum
    ↓
[requestAnimationFrame loop] → Continuous update
```

--------------------------------

### AudioVisualizer Component

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/REFERENCE_INDEX.md

A component for static waveform visualization.

```APIDOC
## AudioVisualizer Component

### Description
Provides static waveform visualization. It is a `forwardRef` component.

### Props
(Refer to the `Props` interface for `LiveAudioVisualizer` as it shares similar underlying structures for data handling, though specific props might differ. The `AudioVisualizer` component primarily accepts data and configuration for rendering.)

### Internal Utilities Used
- `calculateBarData`: Processes audio samples to bar data.
- `draw`: Renders the waveform to a canvas.
```

--------------------------------

### Peer Dependencies for React Audio Visualize

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/module-exports.md

Specifies the required peer dependencies for the library, indicating the minimum versions of React and React DOM needed for compatibility. React 18.2.0+ is recommended for modern features.

```json
{
  "peerDependencies": {
    "react": ">=16.2.0",
    "react-dom": ">=16.2.0"
  }
}
```

--------------------------------

### Import LiveAudioVisualizer Component

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/module-exports.md

Standard import for using the LiveAudioVisualizer component in your application.

```typescript
// Standard import from main entry point
import { LiveAudioVisualizer } from 'react-audio-visualize';
```

--------------------------------

### Props Interface (LiveAudioVisualizer)

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/REFERENCE_INDEX.md

Defines the props for the LiveAudioVisualizer component.

```APIDOC
## Props Interface (LiveAudioVisualizer)

### Description
Defines the public interface for the `LiveAudioVisualizer` component's props.

### Fields
- **data** (Array<dataPoint>) - Required - An array of data points representing the frequency spectrum.
- **options** (object) - Optional - An object containing configuration options for the visualization, such as `fftSize`, `minDecibels`, `maxDecibels`, etc.
```

--------------------------------

### LiveAudioVisualizer Component Call Graph

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/api-reference/Utilities.md

Details the call graph and dependencies for the LiveAudioVisualizer component, showing its animation loop and data processing flow.

```text
LiveAudioVisualizer Component
├── useEffect (setup audio context)
├── useEffect (start animation loop)
│   └── report() (useCallback)
│       ├── analyser.getByteFrequencyData()
│       └── processFrequencyData()
│           ├── calculateBarData() (LiveAudioVisualizer)
│           └── draw() (LiveAudioVisualizer)
└── requestAnimationFrame (report)
```

--------------------------------

### Peer Dependencies for React Audio Visualizer

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/OVERVIEW.md

Specifies the required React and React DOM versions for the library. React 18.2.0+ is recommended for optimal compatibility.

```json
{
  "react": ">=16.2.0",
  "react-dom": ">=16.2.0"
}
```

--------------------------------

### LiveAudioVisualizer Props Interface

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/types.md

Defines all accepted props for the LiveAudioVisualizer component. Ensure mediaRecorder is provided for live visualization.

```typescript
export interface Props {
  mediaRecorder: MediaRecorder;
  width?: number | string;
  height?: number | string;
  barWidth?: number;
  gap?: number;
  backgroundColor?: string;
  barColor?: string;
  fftSize?: 32 | 64 | 128 | 256 | 512 | 1024 | 2048 | 4096 | 8192 | 16384 | 32768;
  maxDecibels?: number;
  minDecibels?: number;
  smoothingTimeConstant?: number;
}
```

--------------------------------

### Optimize AudioVisualizer for Many Bars

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/configuration.md

To achieve detailed visualizations with many bars (100+), use a barWidth of 1 and a gap of 0. This maximizes the number of bars rendered within the given width.

```typescript
// For detailed visualization (100+ bars)
<AudioVisualizer
  blob={audioBlob}
  width={1000}
  height={150}
  barWidth={1}        // Thin bars for detail
  gap={0}             // No gaps
/>
```

--------------------------------

### LiveAudioVisualizer Component Props

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/REFERENCE_INDEX.md

Props available for the LiveAudioVisualizer component, used for real-time audio visualization during recording.

```APIDOC
## Props (LiveAudioVisualizer)

### backgroundColor
- **Type**: string
- **Default**: "transparent"
- **Description**: Sets the background color of the visualization canvas.

### barColor
- **Type**: string
- **Default**: "rgb(160, 198, 255)"
- **Description**: Sets the color of the frequency bars.

### barWidth
- **Type**: number
- **Default**: 2
- **Description**: Sets the width of each individual frequency bar.

### fftSize
- **Type**: number
- **Default**: 1024
- **Description**: The size of the FFT (Fast Fourier Transform) to use for frequency analysis. Affects detail and performance.

### gap
- **Type**: number
- **Default**: 1
- **Description**: Sets the gap between frequency bars.

### height
- **Type**: number | string
- **Default**: "100%"
- **Description**: The height of the visualization canvas.

### maxDecibels
- **Type**: number
- **Default**: -10
- **Description**: The maximum decibel value for the frequency spectrum.

### mediaRecorder
- **Type**: MediaRecorder
- **Required**: Yes
- **Description**: The MediaRecorder instance to capture audio from.

### minDecibels
- **Type**: number
- **Default**: -90
- **Description**: The minimum decibel value for the frequency spectrum.

### smoothingTimeConstant
- **Type**: number
- **Default**: 0.4
- **Description**: The smoothing time constant for frequency data. Affects how quickly the visualization reacts to changes.

### width
- **Type**: number | string
- **Default**: "100%"
- **Description**: The width of the visualization canvas.
```

--------------------------------

### LiveAudioVisualizer Component Usage

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/README.md

Use the LiveAudioVisualizer component to visualize live audio streams from a MediaRecorder. The MediaRecorder must be initialized and set before rendering.

```javascript
import React, { useState } from 'react';
import { LiveAudioVisualizer } from 'react-audio-visualize';

const Visualizer = () => {
  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder>();

  // set media recorder somewhere in code

  return (
    <div>
      {mediaRecorder && (
        <LiveAudioVisualizer
          mediaRecorder={mediaRecorder}
          width={200}
          height={75}
        />
      )}
    </div>
  )
}
```

--------------------------------

### Audio Playback with Current Time Tracking

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/configuration.md

Integrate AudioVisualizer to display audio playback progress by updating its `currentTime` prop based on the audio element's `onTimeUpdate` event.

```typescript
const [currentTime, setCurrentTime] = useState(0);

// Update AudioVisualizer as audio plays
<audio
  onTimeUpdate={(e) => setCurrentTime(e.currentTarget.currentTime)}>
  ...
</audio>

<AudioVisualizer
  blob={audioBlob}
  width={600}
  height={100}
  currentTime={currentTime}
/>
```

--------------------------------

### AudioVisualizer Component Call Graph

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/api-reference/Utilities.md

Illustrates the call flow and dependencies within the AudioVisualizer component, including effects and drawing functions.

```text
AudioVisualizer Component
├── useEffect (process blob)
│   └── calculateBarData()
│   └── draw() (AudioVisualizer)
└── useEffect (render on currentTime change)
    └── draw() (AudioVisualizer)
```

--------------------------------

### Direct Utilities

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/REFERENCE_INDEX.md

Access utility functions directly for advanced use cases.

```APIDOC
## Direct Utilities

### Description
Import specific utility functions for advanced control over audio data processing and rendering.

### Usage
```typescript
import { calculateBarData } from 'react-audio-visualize/src/AudioVisualizer/utils';
```
```

--------------------------------

### Utility Functions

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/module-exports.md

Utility functions for processing audio data and drawing visualizations.

```APIDOC
## Utility Functions

### `calculateBarData`

#### Description
Calculates the data for each bar in the visualization based on frequency data.

#### Parameters
- **frequencyData** (Uint8Array) - Required - The raw frequency data from the MediaStream.
- **width** (number) - Required - The width of the canvas.
- **barWidth** (number) - Required - The width of each bar.
- **gap** (number) - Required - The gap between bars.

#### Returns
- `number[]` - An array of numbers representing the height of each bar.

### `draw`

#### Description
Draws the audio visualization on the canvas.

#### Parameters
- **data** (number[]) - Required - The array of bar heights calculated by `calculateBarData`.
- **canvas** (HTMLCanvasElement) - Required - The canvas element to draw on.
- **barWidth** (number) - Required - The width of each bar.
- **gap** (number) - Required - The gap between bars.
- **backgroundColor** (string) - Required - The background color of the canvas.
- **barColor** (string) - Required - The color of the bars.

### Import Example
```typescript
import { calculateBarData, draw } from 'react-audio-visualize/src/LiveAudioVisualizer/utils';
```
```

--------------------------------

### LiveAudioVisualizer Component Usage

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/api-reference/LiveAudioVisualizer.md

The LiveAudioVisualizer component takes an active MediaRecorder instance and several optional props to customize the audio visualization.

```APIDOC
## LiveAudioVisualizer

### Description
A React component that visualizes audio in real-time from a MediaRecorder stream using frequency domain analysis. This component continuously analyzes and displays the frequency spectrum of live audio input as vertical bars.

### Component Signature
```typescript
const LiveAudioVisualizer: (props: Props) => ReactElement
```

### Props Interface
```typescript
interface Props {
  mediaRecorder: MediaRecorder;
  width?: number | string;
  height?: number | string;
  barWidth?: number;
  gap?: number;
  backgroundColor?: string;
  barColor?: string;
  fftSize?: 32 | 64 | 128 | 256 | 512 | 1024 | 2048 | 4096 | 8192 | 16384 | 32768;
  maxDecibels?: number;
  minDecibels?: number;
  smoothingTimeConstant?: number;
}
```

### Props Details

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| **mediaRecorder** | `MediaRecorder` | Yes | — | Active MediaRecorder instance whose stream will be visualized. Must have an associated stream. |
| **width** | `number \| string` | No | `"100%"` | Width of the canvas. Accepts pixel values (e.g., `500`) or CSS strings (e.g., `"100%"`). |
| **height** | `number \| string` | No | `"100%"` | Height of the canvas. Accepts pixel values (e.g., `100`) or CSS strings (e.g., `"100%"`). |
| **barWidth** | `number` | No | `2` | Width of each individual bar in pixels. |
| **gap** | `number` | No | `1` | Horizontal gap between bars in pixels. |
| **backgroundColor** | `string` | No | `"transparent"` | Background color of the canvas. Any valid CSS color or `"transparent"`. |
| **barColor** | `string` | No | `"rgb(160, 198, 255)"` | Color for the frequency bars. Any valid CSS color value. |
| **fftSize** | `32 \| 64 \| ... \| 32768` | No | `1024` | FFT window size for frequency analysis. Higher values provide more frequency detail but less temporal resolution. Must be a power of 2 between 32 and 32768. |
| **maxDecibels** | `number` | No | `-10` | Maximum decibel value for FFT analysis scaling. Higher values will amplify quieter frequencies. |
| **minDecibels** | `number` | No | `-90` | Minimum decibel value for FFT analysis scaling. Lower values will dampen louder frequencies. Must be less than `maxDecibels`. |
| **smoothingTimeConstant** | `number` | No | `0.4` | Time averaging factor (0 to 1). Higher values create smoother, more continuous visualization. 0 = no averaging, 1 = maximum smoothing. |
```

--------------------------------

### Utility Functions

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/REFERENCE_INDEX.md

Utility functions for audio data processing and rendering.

```APIDOC
## Functions

### calculateBarData (Audio)
- **Description**: Extract bar data from an AudioBuffer.

### calculateBarData (Live)
- **Description**: Extract bar data from a frequency spectrum.

### draw (Audio)
- **Description**: Render waveform bars to a canvas.

### draw (Live)
- **Description**: Render frequency bars to a canvas.
```

--------------------------------

### Export AudioVisualizer Utility Functions

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/module-exports.md

Exports utility functions for calculating and drawing audio visualization data.

```typescript
export const calculateBarData = (
  buffer: AudioBuffer,
  height: number,
  width: number,
  barWidth: number,
  gap: number
): dataPoint[];

export const draw = (
  data: dataPoint[],
  canvas: HTMLCanvasElement,
  barWidth: number,
  gap: number,
  backgroundColor: string,
  barColor: string,
  barPlayedColor?: string,
  currentTime?: number,
  duration?: number
): void;
```

--------------------------------

### Calculate Bar Data for Live Audio

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/api-reference/Utilities.md

Processes frequency spectrum data into bar heights for real-time visualization. Handles variable frequency bin counts and is optimized for high-FPS calls.

```typescript
import { calculateBarData as calculateLiveBarData } from 'react-audio-visualize/src/LiveAudioVisualizer/utils';

// Inside an analyser.getByteFrequencyData() callback:
const frequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(frequencyData);

const barData = calculateLiveBarData(frequencyData, 500, 2, 1);
console.log(`Average frequency of first bar: ${barData[0]}`);
```

--------------------------------

### Export Utility Functions for Audio Visualization

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/module-exports.md

Exports utility functions for calculating bar data from frequency data and drawing the visualization on a canvas.

```typescript
export const calculateBarData = (
  frequencyData: Uint8Array,
  width: number,
  barWidth: number,
  gap: number
): number[]

export const draw = (
  data: number[],
  canvas: HTMLCanvasElement,
  barWidth: number,
  gap: number,
  backgroundColor: string,
  barColor: string
): void
```

--------------------------------

### Import CommonJS Modules in JavaScript

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/module-exports.md

Import components using CommonJS syntax for Node.js environments.

```javascript
const { AudioVisualizer, LiveAudioVisualizer } = require('react-audio-visualize');
```

--------------------------------

### AudioVisualizer Component Usage

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/README.md

Use the AudioVisualizer component to display an audio blob. Ensure the blob state is set before rendering.

```javascript
import React, { useState, useRef } from 'react';
import { AudioVisualizer } from 'react-audio-visualize';

const Visualizer = () => {
  const [blob, setBlob] = useState<Blob>();
  const visualizerRef = useRef<HTMLCanvasElement>(null)

  // set blob somewhere in code

  return (
    <div>
      {blob && (
        <AudioVisualizer
          ref={visualizerRef}
          blob={blob}
          width={500}
          height={75}
          barWidth={1}
          gap={0}
          barColor={'#f76565'}
        />
      )}
    </div>
  )
}
```

--------------------------------

### Draw Bars on Canvas with Playback Progress

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/api-reference/AudioVisualizer.md

Renders the audio visualization bars onto an HTML canvas. It supports custom colors for unplayed and played sections, allowing for visual feedback on playback progress.

```typescript
function draw(
  data: dataPoint[],
  canvas: HTMLCanvasElement,
  barWidth: number,
  gap: number,
  backgroundColor: string,
  barColor: string,
  barPlayedColor?: string,
  currentTime?: number,
  duration?: number
): void
```

--------------------------------

### LiveAudioVisualizer Props Interface

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/api-reference/LiveAudioVisualizer.md

Defines the interface for the props accepted by the LiveAudioVisualizer component, including mediaRecorder, dimensions, styling, and audio analysis parameters.

```typescript
interface Props {
  mediaRecorder: MediaRecorder;
  width?: number | string;
  height?: number | string;
  barWidth?: number;
  gap?: number;
  backgroundColor?: string;
  barColor?: string;
  fftSize?: 32 | 64 | 128 | 256 | 512 | 1024 | 2048 | 4096 | 8192 | 16384 | 32768;
  maxDecibels?: number;
  minDecibels?: number;
  smoothingTimeConstant?: number;
}
```

--------------------------------

### draw Utility

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/REFERENCE_INDEX.md

Renders the visualization to a canvas element.

```APIDOC
## draw Utility

### Description
This utility function is responsible for rendering the processed audio or frequency data onto an HTML canvas element.

### Usage
- For `AudioVisualizer`: Renders the waveform.
- For `LiveAudioVisualizer`: Renders the frequency spectrum.
```

--------------------------------

### LiveAudioVisualizer Component

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/README.md

The LiveAudioVisualizer component visualizes the audio stream from a MediaRecorder in real-time. It offers customization for dimensions and visualization parameters.

```APIDOC
## LiveAudioVisualizer Component

### Description
This component visualizes the live audio stream from a MediaRecorder. It requires a `mediaRecorder` instance and accepts optional props for dimensions and audio analysis settings.

### Props

#### Required Props
- **`mediaRecorder`** (MediaRecorder) - The MediaRecorder instance whose stream needs to be visualized.

#### Optional Props
- **`width`** (number | string) - The width of the visualizer. Default: `100%`.
- **`height`** (number | string) - The height of the visualizer. Default: `100%`.
- **`barWidth`** (number) - The width of each individual bar. Default: `2`.
- **`gap`** (number) - The gap between each bar. Default: `1`.
- **`backgroundColor`** (string) - The background color of the visualization. Default: `transparent`.
- **`barColor`** (string) - The color for the bars. Default: `"rgb(160, 198, 255)"`.
- **`fftSize`** (number) - The window size of the FFT. Default: `1024`.
- **`maxDecibels`** (number) - The maximum decibel value for scaling FFT data. Default: `-10`.
- **`minDecibels`** (number) - The minimum decibel value for scaling FFT data. Default: `-90`.
- **`smoothingTimeConstant`** (number) - The time constant for smoothing FFT data. Default: `0.4`.

### Example Usage
```javascript
import React, { useState } from 'react';
import { LiveAudioVisualizer } from 'react-audio-visualize';

const Visualizer = () => {
  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder>();

  // set media recorder somewhere in code

  return (
    <div>
      {mediaRecorder && (
        <LiveAudioVisualizer
          mediaRecorder={mediaRecorder}
          width={200}
          height={75}
        />
      )}
    </div>
  );
};
```
```

--------------------------------

### AudioVisualizer Component Props

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/REFERENCE_INDEX.md

Props available for the AudioVisualizer component, used for visualizing pre-recorded audio files.

```APIDOC
## Props (AudioVisualizer)

### backgroundColor
- **Type**: string
- **Default**: "transparent"
- **Description**: Sets the background color of the visualization canvas.

### barColor
- **Type**: string
- **Default**: "rgb(184, 184, 184)"
- **Description**: Sets the color of the audio bars when not played.

### barPlayedColor
- **Type**: string
- **Default**: "rgb(160, 198, 255)"
- **Description**: Sets the color of the audio bars that have been played.

### barWidth
- **Type**: number
- **Default**: 2
- **Description**: Sets the width of each individual audio bar.

### blob
- **Type**: Blob
- **Required**: Yes
- **Description**: The audio data to visualize.

### currentTime
- **Type**: number
- **Optional**: Yes
- **Description**: The current playback time, used for syncing visualization with audio playback.

### gap
- **Type**: number
- **Default**: 1
- **Description**: Sets the gap between audio bars.

### height
- **Type**: number
- **Required**: Yes
- **Description**: The height of the visualization canvas.

### ref
- **Type**: React.RefObject
- **Optional**: Yes
- **Description**: A ref to access the canvas element directly.

### style
- **Type**: React.CSSProperties
- **Optional**: Yes
- **Description**: Custom inline styles for the component.

### width
- **Type**: number
- **Required**: Yes
- **Description**: The width of the visualization canvas.
```

--------------------------------

### draw

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/api-reference/AudioVisualizer.md

Renders the audio visualization bars to a canvas element. It supports custom colors for played and unplayed sections, and can optionally indicate playback progress.

```APIDOC
## draw

### Description
Renders the bars to the canvas with optional playback progress coloring. This function takes processed data and styling options to draw the visual representation of the audio.

### Method
`draw(data: dataPoint[], canvas: HTMLCanvasElement, barWidth: number, gap: number, backgroundColor: string, barColor: string, barPlayedColor?: string, currentTime?: number, duration?: number): void`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **data** (`dataPoint[]`) - Required - Array of frequency data points
- **canvas** (`HTMLCanvasElement`) - Required - Canvas element to draw on
- **barWidth** (`number`) - Required - Width of each bar
- **gap** (`number`) - Required - Gap between bars
- **backgroundColor** (`string`) - Required - Canvas background color
- **barColor** (`string`) - Required - Color for unplayed bars
- **barPlayedColor** (`string | undefined`) - Optional - Color for played bars
- **currentTime** (`number | undefined`) - Optional - Current playback position in seconds
- **duration** (`number | undefined`) - Optional - Total duration in seconds

### Returns
`void`
```

--------------------------------

### Draw Live Audio Visualizer Bars

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/api-reference/Utilities.md

Renders frequency bars to a canvas element for real-time visualization. Clears the canvas, draws a background if specified, and renders bars centered vertically.

```typescript
import { draw as drawLive } from 'react-audio-visualize/src/LiveAudioVisualizer/utils';

const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const frequencyBars = [120, 110, 95, 80, 70, ...]; // from calculateBarData

drawLive(
  frequencyBars,
  canvas,
  2,                    // barWidth
  1,                    // gap
  'transparent',
  'rgb(160, 198, 255)'
);
```

--------------------------------

### Import AudioVisualizer Component

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/module-exports.md

Standard import for using the AudioVisualizer component in your React application.

```typescript
// Standard import from main entry point
import { AudioVisualizer } from 'react-audio-visualize';
```

--------------------------------

### Import Internal Utilities and Types

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/module-exports.md

Imports for accessing underlying utility functions and type definitions for advanced usage.

```typescript
// Accessing underlying utilities (if needed for advanced use)
import { calculateBarData, draw } from 'react-audio-visualize/src/AudioVisualizer/utils';
import type { dataPoint } from 'react-audio-visualize/src/AudioVisualizer/types';
```

--------------------------------

### No Side Effects Configuration

Source: https://github.com/samhirtarif/react-audio-visualize/blob/master/_autodocs/module-exports.md

Configures the package.json to indicate that the library has no side effects. This allows bundlers to safely tree-shake unused exports, optimizing the final bundle size.

```json
{
  "sideEffects": false
}
```