### Install Waviz

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Install the Waviz library using npm. This is the first step to using Waviz in your project.

```bash
npm i waviz
```

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

### Initialize Pending Input and Start Visualizer

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Asynchronously initialize pending input and start the visualizer. This is crucial for media stream inputs and ensures user permissions are handled.

```typescript
const myWaviz = new Waviz(canvas, audio);

audio.addEventListener('play', async () => {
    await myWaviz.input.initializePending(); 
    myWaviz.visualizer.simpleBars();
});

audio.addEventListener('pause', () => {
  myWaviz.visualizer.stop();
});
```

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

### Start Simple Bars Visualizer

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Call the simpleBars method on the visualizer to start displaying audio data. This should be tied to a user gesture due to browser policies.

```typescript
myWaviz.visualizer.simpleBars();
```

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

### Initialize Waviz Class

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Initialize the Waviz class with a canvas and audio source. This is the recommended way to start with Waviz Core.

```typescript
const myWaviz = new Waviz(canvas, audio);
```

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

### Start Visualizer Rendering

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Call the `.render()` method on the visualizer instance to begin rendering. It's recommended to trigger this within a user gesture, such as an event listener for audio playback.

```typescript
viz.visualizer.render();
```

```typescript
audio.addEventListener('play', () => {
  viz.visualizer.render();
});
```

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

### Initialize Input Class

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Initialize the Input class with a callback function for source node setup and an optional AudioContext. This is used for preparing audio inputs.

```typescript
const input = new Input((sourceNode) => {
  // Setup your analyzer or other logic here
  analyzer.startAnalysis(audioContext, sourceNode);
}, audioContext);
```

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

### Initialize Analyzer Class

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Instantiate the AudioAnalyzer and start the analysis process with an AudioContext and a sourceNode. This class handles audio data transformation.

```typescript
const testAnalyzer = new AudioAnalyzer();
testAnalyzer.startAnalysis(audioContext, sourceNode);
```

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

### Initialize Waviz and Control Visualization

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Initializes the Waviz visualizer with a canvas and audio element. It sets up event listeners to start and stop the 'simpleBars' visualization when the audio plays or pauses.

```javascript
const Waviz = window.Waviz.default;

const canvas = document.getElementById('canvas')
const audio = document.getElementById('audio')

const wavizTest = new Waviz(canvas, audio);

audio.addEventListener('play', async () => {
    wavizTest.visualizer.simpleBars();
});

audio.addEventListener('pause', () => {
  wavizTest.visualizer.stop();
});

```

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

### Get Audio Data

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Retrieve frequency domain or time domain data from an active audio analysis. Ensure analysis has been started before calling these methods.

```typescript
const frequencyData = analyzer.getFrequencyData();
const timeDomainData = analyzer.getTimeDomainData();
```

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

### get timeData

Source: https://github.com/waviz-team/waviz/blob/main/doc/AnalyzerDocs.md

A getter function that returns the time-domain data, equivalent to calling getTimeDomainData().

```APIDOC
## get timeData

### Description
A getter function that provides access to the time-domain data, returning the same result as the getTimeDomainData() method.

### Returns
* **timeDomainData** (Uint8Array) - An array of 8-bit unsigned integers representing time-domain data.
```

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

### get freqData

Source: https://github.com/waviz-team/waviz/blob/main/doc/AnalyzerDocs.md

A getter function that returns the frequency data, equivalent to calling getFrequencyData().

```APIDOC
## get freqData

### Description
A getter function that provides access to the frequency data, returning the same result as the getFrequencyData() method.

### Returns
* **frequencyData** (Uint8Array) - An array of 8-bit unsigned integers representing frequency data.
```

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

### Initialize Visualizer with MediaStream

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Demonstrates initializing the visualizer using a mediaStream input by setting the audio ref directly to 'screenAudio'.

```typescript
const audioRef = useRef('screenAudio')
```

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

### Initialize Waviz Visualizer

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Create a new Waviz instance by providing an HTML canvas element and an audio source element. Ensure the elements are correctly selected from the DOM.

```typescript
import Waviz from '../core/waviz';

// Document Elements
const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const audio = document.getElementById('audio') as HTMLAudioElement;

// Waviz Instance
const viz = new Waviz(canvas, audio);
```

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

### startAnalysis()

Source: https://github.com/waviz-team/waviz/blob/main/doc/AnalyzerDocs.md

Initiates the audio analysis process. It requires an audioContext and an AudioNode to connect to. By default, it uses an fftSize of 2048.

```APIDOC
## startAnalysis()

### Description
Starts the Fourier analysis on the provided audio context using the WebAudio API's createAnalyser() method. Requires an audioContext and a sourceNode.

### Parameters
* **audioContext** (AudioContext) - Required - The audio context to perform analysis on.
* **sourceNode** (AudioNode) - Required - An AudioNode to connect to for analysis.

### Default Settings
* **fftSize**: 2048
```

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

### Basic Visualizer Usage

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Initialize the Waviz visualizer with a canvas element and an audio source. Add an event listener to draw a simple waveform line when audio plays.

```javascript
import {Waviz} from 'waviz'

const canvas = document.getElementById('canvas');
const audio = document.getElementById('audio');

const myWaviz = new Waviz(canvas, audio);

audio.addEventListener('play', async () => {
  myWaviz.simpleLine('#3498db'); // Draws a simple blue waveform line
});
```

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

### Create Directory for Waviz UMD File

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Creates a parent directory named 'libs' to store the Waviz UMD file. This step is necessary if the 'libs' folder does not already exist.

```bash
mkdir -p libs
```

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

### Importing Specific Dot Visualizations

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Shows how to import individual Dot visualization presets from the 'waviz' library, such as Dots1, Dots2, etc.

```tsx
import { Dots1 } from 'waviz';
import { Dots2 } from 'waviz';
import { Dots3 } from 'waviz';
import { Dots4 } from 'waviz';
```

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

### HTML Structure for Waviz Integration

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Sets up the basic HTML structure for a web page that will use Waviz. It includes a canvas for visualization, an audio element, and script tags to load the Waviz UMD file and the main JavaScript file.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WavizHTMLTest</title>
  </head>
  <body>
      <canvas id="canvas" width="800" height="400"></canvas>
      <audio id="audio" src="/CoolMusic.mp3" controls></audio>
      <script src="libs/waviz.umd.js"></script>
      <script type="module" src="index.js"></script>
  </body>
</html>

```

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

### Import Waviz in React Application

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Demonstrates how to import the Waviz library when using it within a React application. This import statement is similar to using the Plug n Play Library.

```javascript
import Waviz from 'waviz'

```

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

### Import Waviz Core

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Import the Waviz core library for use in your project. Supports both CommonJS and ESM.

```javascript
import Waviz from 'waviz/core'
```

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

### Configure 'particles' Visualization

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Spawns reactive particles influenced by waveform data. Customize initial velocity, gravity, lifespan, birthrate, and sampling for particle behavior and density.

```typescript
viz: ['particles', <initialVelocity>, <gravity>, <lifespan>, <birthrate>, <sampling>]
```

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

### Copy Waviz UMD File to Libs Directory

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Moves the Waviz UMD file from the node_modules directory into the newly created 'libs' folder. This makes the library accessible for browser use.

```bash
cp node_modules/waviz/dist/waviz.umd.js libs/
```

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

### Waviz Configuration Object Structure

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Customize the Waviz visualizer using a configuration object or an array of objects. Each object can contain settings for domain, coordinates, visualization type, color, and style.

```typescript
{
  domain: [],
  coord: [],
  viz: [],
  color: [],
  style: [],
}
```

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

### Simple Line Visualization

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Renders a basic line visualization in rectangular coordinates with a single specified color. Use this for a straightforward line graph.

```typescript
viz.visualizer.simpleLine('#E34AB0');
```

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

### Configure 'polarBars' Visualization (Beta)

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Draws bars in a circular pattern within polar mode. This is an experimental feature and may yield unpredictable results.

```typescript
viz: ['polarBars']
```

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

### React Component Basic Usage

Source: https://github.com/waviz-team/waviz/blob/main/README.md

Integrate Waviz visualizations into a React application using the Mixed3 component. Requires refs for audio and canvas elements, and an audio source.

```tsx
import React, { useRef } from 'react';
import { Mixed3 } from 'waviz';

export default function App() {
  const audioRef = useRef<HTMLAudioElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  return (
    <div>
      <Mixed3 srcAudio={audioRef} srcCanvas={canvasRef} />
      <canvas ref={canvasRef} width={400} height={400}></canvas>
      <audio ref={audioRef} src="/your-audio-file.mp3" controls />
    </div>
  );
}
```

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

### Configure 'line' Visualization

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Draws a waveform line using a specified number of sample points. This is the default visualization type.

```typescript
viz: ['line', <sampling?>]
```

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

### Configure Solid Color

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Set a solid color for the visualizer using any valid CSS color name or HEX code.

```typescript
color: ['red']
```

```typescript
color: ['#23AB87']
```

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

### Configure 'dots' Visualization

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Draws a series of animated dots. The number of dots can be specified to control the density of the animation.

```typescript
viz: ['dots', <numDots?>]
```

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

### Configure 'bars' Visualization

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Draws vertical bars based on audio amplitude. Specify the number of bars. Note that this visualization is not compatible with 'polar' coordinates.

```typescript
viz: ['bars', <numBars?>]
```

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

### Configure Domain for Audio Data

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

The domain option controls the type and shape of audio data input. It accepts domain type ('time' or 'freq'), amplitude, and range.

```typescript
domain: [<domainType>, <amplitude>, <range>]
```

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

### Layering Multiple Visualizations

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Render multiple visualizations on the same canvas by passing an array of options objects to the .render() method. Each object defines a layer, rendered from bottom to top.

```typescript
viz.visualizer.render([
  {
    domain: ['time'],
    coord: ['rect'],
    viz: ['particles', [2, 2], 3],
    color: ['linearGradient'],
    style: [2],
  },
  {
    domain: ['time'],
    coord: ['polar'],
    viz: ['particles', [3, 3], 1, 20],
    color: ['linearGradient'],
    style: [2],
  },
]);
```

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

### Simple Polar Bars Visualization

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Renders radial bars in a circular layout using a single specified color. Use this for dynamic radial bar charts.

```typescript
viz.visualizer.simplePolarBars('#E34AB0');
```

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

### getTimeDomainData()

Source: https://github.com/waviz-team/waviz/blob/main/doc/AnalyzerDocs.md

Retrieves the array of time-domain data, mapped by FFT into bins. The data is returned as an array of 8-bit unsigned integers.

```APIDOC
## getTimeDomainData()

### Description
Returns an array containing the time-domain data, where the data is mapped by FFT into bins. The array consists of 8-bit unsigned integers.

### Returns
* **timeDomainData** (Uint8Array) - An array of 8-bit unsigned integers representing time-domain data. The array length is half of the fftSize.
```

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

### Configure Radial Gradient Color

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Create a radial gradient that blends colors from the center outwards. Accepts any valid CSS colors.

```typescript
color: ['radialGradient', 'red', 'blue']
```

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

### Configure Random Color (Per Frame)

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Assigns a new random color to the visualizer on each frame, creating dynamic color changes.

```typescript
color: ['randomColor']
```

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

### Simple Bars Visualization

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Renders vertical bars using TimeDomain data with increased amplitude and thick strokes, all in a single specified color. Suitable for bar charts with emphasis on amplitude.

```typescript
viz.visualizer.simpleBars('#E34AB0');
```

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

### Simple Polar Line Visualization

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Renders a circular line visualization using polar coordinates with a single specified color. Ideal for radial or circular line-based graphics.

```typescript
viz.visualizer.simplePolarLine('#E34AB0');
```

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

### Configure Random Palette Color (Per Frame)

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Chooses a new color from a predefined palette on each frame, allowing for controlled random color variations.

```typescript
color: ['randomPalette', ['red', 'green', 'blue']]
```

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

### getFrequencyData()

Source: https://github.com/waviz-team/waviz/blob/main/doc/AnalyzerDocs.md

Retrieves the array of frequency data, mapped by FFT into bins. The data is returned as an array of 8-bit unsigned integers.

```APIDOC
## getFrequencyData()

### Description
Returns an array containing the frequency data, where the data is mapped by FFT into bins. The array consists of 8-bit unsigned integers.

### Returns
* **frequencyData** (Uint8Array) - An array of 8-bit unsigned integers representing frequency data. The array length is half of the fftSize.
```

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

### Configure Linear Gradient Color

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Create a vertical color blend between two specified colors using a linear gradient. Accepts any valid CSS colors.

```typescript
color: ['linearGradient', 'red', 'blue']
```

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

### getBufferLength()

Source: https://github.com/waviz-team/waviz/blob/main/doc/AnalyzerDocs.md

Returns the frequency bin count, which is half of the fftSize.

```APIDOC
## getBufferLength()

### Description
Outputs the number of frequency bins, which is calculated as half of the fftSize.

### Returns
* **bufferLength** (number) - The count of frequency bins.
```

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

### Configure Coordinates for Rendering

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

The coord option defines the coordinate system for rendering, supporting 'rect' (Cartesian) or 'polar' (circular) systems. A radius can be specified for polar coordinates.

```typescript
coord: [<coordinateSystem>, <radius?>]
```

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

### getDataArray()

Source: https://github.com/waviz-team/waviz/blob/main/doc/AnalyzerDocs.md

Retrieves the raw frequency data as an array of 8-bit unsigned integers.

```APIDOC
## getDataArray()

### Description
Returns the raw frequency data as an array of 8-bit unsigned integers.

### Returns
* **rawData** (Uint8Array) - An array of 8-bit unsigned integers representing the raw frequency data.
```

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

### Stop Visualizer

Source: https://github.com/waviz-team/waviz/blob/main/doc/VisualizerDocs.md

Stop the visualizer when audio playback pauses or ends to conserve resources. This is particularly useful for finite audio sources.

```typescript
audio.addEventListener('pause', () => {
  viz.stop();
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.