### Setup and Connect WEQ8Runtime

Source: https://github.com/teropa/weq8/blob/main/README.md

Initialize the runtime with an AudioContext and connect it to your audio signal path.

```ts
import { WEQ8Runtime } from "weq8"; // or from "https://cdn.skypack.dev/weq8"

let weq8 = new WEQ8Runtime(yourAudioCtx);
yourAudioSourceNode.connect(weq8.input);
weq8.connect(yourAudioDestinationNode);
```

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

### Install weq8

Source: https://github.com/teropa/weq8/blob/main/README.md

Use yarn or npm to add the package to your project.

```bash
yarn add weq8
# or
npm install weq8
```

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

### Install weq8 using npm or yarn

Source: https://context7.com/teropa/weq8/llms.txt

Install the weq8 package using your preferred package manager.

```bash
# Using yarn
yarn add weq8
```

```bash
# Using npm
npm install weq8
```

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

### Implement Full Audio Processing

Source: https://context7.com/teropa/weq8/llms.txt

A complete setup including AudioContext initialization, signal chain connection, UI binding, and state persistence.

```typescript
import { WEQ8Runtime } from "weq8";
import "weq8/ui";

async function initializeAudioEQ() {
  // Create AudioContext (must be triggered by user interaction)
  const audioCtx = new AudioContext();

  // Restore saved state or use defaults
  const savedState = localStorage.getItem("eqPreset");
  const initialState = savedState ? JSON.parse(savedState) : undefined;

  // Initialize EQ runtime
  const weq8 = new WEQ8Runtime(audioCtx, initialState);

  // Set up audio source
  const audioElement = document.getElementById("audio") as HTMLAudioElement;
  const source = audioCtx.createMediaElementSource(audioElement);

  // Connect signal chain: source -> EQ -> output
  source.connect(weq8.input);
  weq8.connect(audioCtx.destination);

  // Connect UI
  const ui = document.querySelector("weq8-ui") as any;
  ui.runtime = weq8;

  // Auto-save on changes
  weq8.on("filtersChanged", (state) => {
    localStorage.setItem("eqPreset", JSON.stringify(state));
  });

  // Example preset: Vocal clarity
  function applyVocalPreset() {
    // High-pass to remove rumble
    weq8.setFilterType(0, "highpass24");
    weq8.setFilterFrequency(0, 80);

    // Cut muddy frequencies
    weq8.setFilterType(1, "peaking12");
    weq8.setFilterFrequency(1, 300);
    weq8.setFilterQ(1, 1.0);
    weq8.setFilterGain(1, -3.0);

    // Boost presence
    weq8.setFilterType(2, "peaking12");
    weq8.setFilterFrequency(2, 3000);
    weq8.setFilterQ(2, 0.7);
    weq8.setFilterGain(2, 4.0);

    // Add air
    weq8.setFilterType(3, "highshelf12");
    weq8.setFilterFrequency(3, 10000);
    weq8.setFilterGain(3, 2.0);
  }

  return { weq8, applyVocalPreset };
}

// Initialize on user interaction
document.getElementById("start")?.addEventListener("click", () => {
  initializeAudioEQ();
});
```

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

### Web Component UI Setup

Source: https://context7.com/teropa/weq8/llms.txt

The `<weq8-ui>` Web Component provides a complete graphical interface with draggable filter handles, frequency response visualization, and spectrum analysis. Import the UI module to register the custom element.

```typescript
import { WEQ8Runtime } from "weq8";
import "weq8/ui"; // Registers <weq8-ui> custom element

// Create runtime
const audioCtx = new AudioContext();
const weq8 = new WEQ8Runtime(audioCtx);

// Connect audio source
const source = audioCtx.createMediaElementSource(
  document.querySelector("audio")
);
source.connect(weq8.input);
weq8.connect(audioCtx.destination);

// Connect runtime to UI
const uiElement = document.querySelector("weq8-ui");
uiElement.runtime = weq8;

// Optional: Set view mode ("allBands" or "hud")
uiElement.view = "allBands";
```

```html
<!-- Add to your HTML -->
<weq8-ui></weq8-ui>

<style>
  weq8-ui {
    width: 800px;
    height: 300px;
  }
</style>
```

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

### Get Filter Frequency Response

Source: https://context7.com/teropa/weq8/llms.txt

Retrieve the frequency response data for a specific filter in a band. This method wraps the native `BiquadFilterNode.getFrequencyResponse()` and is useful for building custom visualization components.

```typescript
import { WEQ8Runtime } from "weq8";

const audioCtx = new AudioContext();
const weq8 = new WEQ8Runtime(audioCtx);

// Set up a filter
weq8.setFilterType(0, "peaking12");
weq8.setFilterFrequency(0, 1000);
weq8.setFilterGain(0, 6.0);

// Create arrays for frequency response data
const numPoints = 100;
const frequencies = new Float32Array(numPoints);
const magResponse = new Float32Array(numPoints);
const phaseResponse = new Float32Array(numPoints);

// Fill frequency array (logarithmic scale from 20Hz to 20kHz)
for (let i = 0; i < numPoints; i++) {
  frequencies[i] = 20 * Math.pow(1000, i / (numPoints - 1));
}

// Get response for filter 0, first BiquadFilterNode (index 0)
const hasData = weq8.getFrequencyResponse(
  0,              // filter band index
  0,              // BiquadFilterNode index within band (0 for 12dB, 0-1 for 24dB)
  frequencies,
  magResponse,
  phaseResponse
);

if (hasData) {
  // Convert magnitude to dB for display
  const dbResponse = Array.from(magResponse).map(
    mag => 20 * Math.log10(mag)
  );
  console.log("Frequency response (dB):", dbResponse);
}
```

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

### Initialize WEQ8 Runtime

Source: https://github.com/teropa/weq8/blob/main/index.html

Sets up the AudioContext and connects the WEQ8 runtime to the audio destination.

```typescript
import { WEQ8Runtime } from "/src/main.ts"; let audioctx = new AudioContext(); let runtime = new WEQ8Runtime(audioctx); runtime.connect(audioctx.destination); fetch("/testloop.m4a") .then((res) => res.arrayBuffer()) .then((buf) => audioctx.decodeAudioData(buf)) .then((buf) => { let btn = document.getElementById("startstop"); let src; btn.addEventListener("click", () => { if (btn.textContent == "Start") { src = audioctx.createBufferSource(); src.buffer = buf; src.loop = true; src.connect(runtime.input); src.start(); btn.textContent = "Stop"; } else { src.stop(); src.disconnect(); src = null; btn.textContent = "Start"; } }); }); document.querySelector("weq8-ui").runtime = runtime; document.querySelectorAll("input\[name=view\]").forEach((el) => el.addEventListener("change", (e) => { document.querySelector("weq8-ui").view = e.target.value; }) );
```

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

### WEQ8Runtime Constructor

Source: https://context7.com/teropa/weq8/llms.txt

Initializes the equalizer engine with an AudioContext and optional saved state.

```APIDOC
## WEQ8Runtime Constructor

### Description
Initializes the core audio processing engine that manages the filter bank.

### Parameters
- **audioCtx** (AudioContext) - Required - The Web Audio context.
- **savedState** (Object) - Optional - A previously serialized filter configuration to restore.

### Request Example
const weq8 = new WEQ8Runtime(audioCtx, savedState);
```

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

### Initialize WEQ8Runtime

Source: https://context7.com/teropa/weq8/llms.txt

Initialize the WEQ8Runtime with an AudioContext. Optionally, restore from a saved filter state.

```typescript
import { WEQ8Runtime } from "weq8";

// Create an AudioContext
const audioCtx = new AudioContext();

// Initialize the equalizer runtime
const weq8 = new WEQ8Runtime(audioCtx);

// Or restore from a saved state
const savedState = JSON.parse(localStorage.getItem("eqState"));
const weq8WithState = new WEQ8Runtime(audioCtx, savedState);

// Access the input node for connecting audio sources
console.log(weq8.input); // GainNode
```

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

### Register and Add UI Component

Source: https://github.com/teropa/weq8/blob/main/README.md

Import the UI module to register the web component and add it to your HTML.

```ts
import "weq8/ui"; // or "https://cdn.skypack.dev/weq8/ui"
```

```html
<weq8-ui />
```

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

### Configure Filter Types

Source: https://context7.com/teropa/weq8/llms.txt

Demonstrates how to set various filter types and slopes using the WEQ8Runtime instance.

```typescript
import { WEQ8Runtime } from "weq8";

const audioCtx = new AudioContext();
const weq8 = new WEQ8Runtime(audioCtx);

// LOWPASS FILTERS - Cut high frequencies
// 12dB/octave (single biquad) or 24dB/octave (two cascaded biquads)
weq8.setFilterType(0, "lowpass12");  // Gentle roll-off
weq8.setFilterType(0, "lowpass24");  // Steeper roll-off

// HIGHPASS FILTERS - Cut low frequencies
weq8.setFilterType(1, "highpass12"); // Gentle roll-off
weq8.setFilterType(1, "highpass24"); // Steeper roll-off

// BANDPASS FILTERS - Pass frequencies around center, cut others
weq8.setFilterType(2, "bandpass12");
weq8.setFilterType(2, "bandpass24");

// SHELF FILTERS - Boost/cut above or below frequency (uses gain parameter)
weq8.setFilterType(3, "lowshelf12");   // Affect lows
weq8.setFilterType(3, "highshelf12");  // Affect highs
weq8.setFilterType(3, "lowshelf24");   // Steeper transition
weq8.setFilterType(3, "highshelf24");  // Steeper transition

// PEAKING FILTERS - Boost/cut around center frequency (uses gain & Q)
weq8.setFilterType(4, "peaking12");
weq8.setFilterType(4, "peaking24");

// NOTCH FILTERS - Cut narrow band around center frequency
weq8.setFilterType(5, "notch12");
weq8.setFilterType(5, "notch24");
```

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

### Web Component UI

Source: https://context7.com/teropa/weq8/llms.txt

Integration of the <weq8-ui> custom element.

```APIDOC
## <weq8-ui>

### Description
Provides a graphical interface for the WEQ8 runtime.

### Properties
- **runtime** (WEQ8Runtime) - Required - The runtime instance to control.
- **view** (string) - Optional - View mode, e.g., 'allBands' or 'hud'.
```

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

### Connect WEQ8Runtime to Audio Graph

Source: https://context7.com/teropa/weq8/llms.txt

Connect the equalizer's input to an audio source and its output to the audio destination. Disconnect when no longer needed.

```typescript
import { WEQ8Runtime } from "weq8";

const audioCtx = new AudioContext();
const weq8 = new WEQ8Runtime(audioCtx);

// Load an audio source
const audioElement = document.querySelector("audio");
const source = audioCtx.createMediaElementSource(audioElement);

// Connect: source -> equalizer -> destination
source.connect(weq8.input);
weq8.connect(audioCtx.destination);

// Later, disconnect from destination
weq8.disconnect(audioCtx.destination);
```

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

### Connect Runtime to UI

Source: https://github.com/teropa/weq8/blob/main/README.md

Assign the initialized runtime instance to the UI component property.

```ts
document.querySelector("weq8-ui").runtime = weq8;
```

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

### on() Event Listener

Source: https://context7.com/teropa/weq8/llms.txt

Subscribes to filter state changes.

```APIDOC
## on('filtersChanged', callback)

### Description
Subscribe to filter state changes. Useful for persistence and UI synchronization.

### Parameters
- **event** (string) - Required - Must be 'filtersChanged'.
- **callback** (function) - Required - Function receiving the serializable WEQ8Spec array.
```

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

### setFilterQ()

Source: https://context7.com/teropa/weq8/llms.txt

Sets the quality factor (Q) for a filter band.

```APIDOC
## setFilterQ()

### Description
Sets the Q (quality factor) for a filter band. Higher values create narrower, more resonant peaks.

### Parameters
- **band** (number) - Required - The index of the filter band (0-7).
- **q** (number) - Required - The quality factor value.
```

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

### setFilterGain()

Source: https://context7.com/teropa/weq8/llms.txt

Sets the gain in dB for a specific filter band. Applicable to lowshelf, highshelf, and peaking filter types.

```APIDOC
## setFilterGain(index, gain)

### Description
Sets the gain in dB for a filter band. Typical range is -15dB to +15dB.

### Parameters
- **index** (number) - Required - The index of the filter band.
- **gain** (number) - Required - The gain value in dB.
```

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

### Set Filter Q (Quality Factor)

Source: https://context7.com/teropa/weq8/llms.txt

Set the Q factor for a filter band, which determines the narrowness of the filter's resonance. Higher Q values create narrower peaks. Applicable to lowpass, highpass, bandpass, peaking, and notch filters.

```typescript
import { WEQ8Runtime } from "weq8";

const audioCtx = new AudioContext();
const weq8 = new WEQ8Runtime(audioCtx);

// Create a narrow notch filter to remove 60Hz hum
weq8.setFilterType(0, "notch12");
weq8.setFilterFrequency(0, 60);
weq8.setFilterQ(0, 10.0); // High Q for narrow notch

// Create a wide peaking boost for warmth
weq8.setFilterType(1, "peaking12");
weq8.setFilterFrequency(1, 200);
weq8.setFilterQ(1, 0.5); // Low Q for broad adjustment

// Create a resonant lowpass for effect
weq8.setFilterType(2, "lowpass24");
weq8.setFilterFrequency(2, 1000);
weq8.setFilterQ(2, 5.0); // Resonant peak at cutoff
```

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

### Set Filter Gain in dB

Source: https://context7.com/teropa/weq8/llms.txt

Set the gain in dB for a filter band. Gain is applicable to lowshelf, highshelf, and peaking filter types. Typical range is -15dB to +15dB.

```typescript
import { WEQ8Runtime } from "weq8";

const audioCtx = new AudioContext();
const weq8 = new WEQ8Runtime(audioCtx);

// Cut low-end rumble with a low shelf
weq8.setFilterType(0, "lowshelf12");
weq8.setFilterFrequency(0, 100);
weq8.setFilterGain(0, -6.0); // -6dB reduction

// Boost mids for vocal presence
weq8.setFilterType(1, "peaking12");
weq8.setFilterFrequency(1, 3000);
weq8.setFilterQ(1, 1.0);
weq8.setFilterGain(1, 4.5); // +4.5dB boost

// Add air with a high shelf
weq8.setFilterType(2, "highshelf24");
weq8.setFilterFrequency(2, 10000);
weq8.setFilterGain(2, 3.0); // +3dB boost
```

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

### Set Filter Type

Source: https://context7.com/teropa/weq8/llms.txt

Set the filter type for a specific band (0-7). Use 'noop' to disable a band. Available types include various lowpass, highpass, bandshelf, peaking, notch, and bandpass filters with 12dB or 24dB slopes.

```typescript
import { WEQ8Runtime } from "weq8";

const audioCtx = new AudioContext();
const weq8 = new WEQ8Runtime(audioCtx);

// Available filter types:
// "lowpass12", "lowpass24", "highpass12", "highpass24",
// "bandpass12", "bandpass24", "lowshelf12", "lowshelf24",
// "highshelf12", "highshelf24", "peaking12", "peaking24",
// "notch12", "notch24", "noop"

// Set filter 0 to a 24dB/octave lowpass
weq8.setFilterType(0, "lowpass24");

// Set filter 1 to a peaking EQ for mid-range adjustment
weq8.setFilterType(1, "peaking12");

// Set filter 2 to a high shelf for treble control
weq8.setFilterType(2, "highshelf12");

// Disable filter 3
weq8.setFilterType(3, "noop");
```

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

### WEQ8 UI CSS Styling

Source: https://github.com/teropa/weq8/blob/main/index.html

Defines the layout and appearance for the WEQ8 component and its container elements.

```css
weq8 body { background-color: #555; color: white; } .viewSelect { display: flex; justify-content: center; margin: 20px 0; } button { display: block; margin: 50px auto; } weq8-ui { max-width: 800px; margin: 0 auto; }
```

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

### getFrequencyResponse()

Source: https://context7.com/teropa/weq8/llms.txt

Retrieves frequency response data for a filter band.

```APIDOC
## getFrequencyResponse(bandIndex, nodeIndex, frequencies, magResponse, phaseResponse)

### Description
Wraps the native BiquadFilterNode.getFrequencyResponse() for visualization.

### Parameters
- **bandIndex** (number) - Required - Index of the filter band.
- **nodeIndex** (number) - Required - BiquadFilterNode index within the band.
- **frequencies** (Float32Array) - Required - Array of frequencies to measure.
- **magResponse** (Float32Array) - Required - Array to store magnitude response.
- **phaseResponse** (Float32Array) - Required - Array to store phase response.
```

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

### toggleBypass()

Source: https://context7.com/teropa/weq8/llms.txt

Enables or disables bypass for a specific filter band.

```APIDOC
## toggleBypass(index, bypass)

### Description
Removes the filter from the signal chain when bypassed, while retaining its settings.

### Parameters
- **index** (number) - Required - The index of the filter band.
- **bypass** (boolean) - Required - True to bypass, false to enable.
```

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

### Control EQ Programmatically

Source: https://github.com/teropa/weq8/blob/main/README.md

Use runtime methods to adjust filter parameters directly without the UI component.

```ts
weq8.setFilterType(filterNumber, "lowpass12"); // or "lowpass24", "highpass12", "highpass24", "bandpass", "lowshelf12", "lowshelf24", "highshelf12", "highshelf24", "peaking12", "peaking24", "notch12", "notch24"
weq8.toggleBypass(filterNumber, true); // true to bypass this filter, false to (re-)connect it.
weq8.setFilterFrequency(filterNumber, 1000); // filter frequency in Hz
weq8.setFilterQ(filterNumber, 1.0); // filter Q
weq8.setFilterGain(filterNumber, 0.0); // filter gain in dB
```

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

### setFilterFrequency()

Source: https://context7.com/teropa/weq8/llms.txt

Sets the center or cutoff frequency for a filter band.

```APIDOC
## setFilterFrequency()

### Description
Sets the center or cutoff frequency for a filter band in Hz.

### Parameters
- **band** (number) - Required - The index of the filter band (0-7).
- **frequency** (number) - Required - The frequency in Hz.
```

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

### Subscribe to Filter Changes

Source: https://context7.com/teropa/weq8/llms.txt

Subscribe to filter state changes with the `filtersChanged` event. This is essential for persisting EQ configurations and keeping UI components in sync with runtime state.

```typescript
import { WEQ8Runtime } from "weq8";

const audioCtx = new AudioContext();
const weq8 = new WEQ8Runtime(audioCtx);

// Subscribe to filter changes
const unsubscribe = weq8.on("filtersChanged", (state) => {
  // state is a serializable WEQ8Spec array
  console.log("Filter state changed:", state);

  // Persist to localStorage
  localStorage.setItem("eqState", JSON.stringify(state));

  // Or send to server
  // fetch("/api/save-preset", {
  //   method: "POST",
  //   body: JSON.stringify(state)
  // });
});

// Make some changes (each triggers the callback)
weq8.setFilterType(0, "lowpass24");
weq8.setFilterFrequency(0, 500);

// Unsubscribe when done
unsubscribe();
```

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

### setFilterType()

Source: https://context7.com/teropa/weq8/llms.txt

Configures the filter type and slope for a specific band.

```APIDOC
## setFilterType()

### Description
Sets the filter type for a specific band (0-7). Available types include lowpass, highpass, bandpass, lowshelf, highshelf, peaking, and notch filters with 12dB or 24dB slopes.

### Parameters
- **band** (number) - Required - The index of the filter band (0-7).
- **type** (string) - Required - The filter type (e.g., "lowpass24", "peaking12", "noop").
```

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

### Set Filter Frequency

Source: https://context7.com/teropa/weq8/llms.txt

Set the center or cutoff frequency for a filter band in Hz. The valid range is typically 20Hz to the Nyquist frequency.

```typescript
import { WEQ8Runtime } from "weq8";

const audioCtx = new AudioContext();
const weq8 = new WEQ8Runtime(audioCtx);

// Configure a low-cut filter at 80Hz
weq8.setFilterType(0, "highpass24");
weq8.setFilterFrequency(0, 80);

// Configure a parametric mid boost at 2kHz
weq8.setFilterType(1, "peaking12");
weq8.setFilterFrequency(1, 2000);

// Configure a high shelf at 8kHz for air/presence
weq8.setFilterType(2, "highshelf12");
weq8.setFilterFrequency(2, 8000);
```

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

### Persist Filter State

Source: https://github.com/teropa/weq8/blob/main/README.md

Subscribe to state changes for serialization and provide a saved state during runtime initialization.

```ts
weq8.on("filtersChanged", (state) => {
  // state is a data structure you can store in a variable, or serialize to JSON.
});
```

```ts
let weq8 = new WEQ8Runtime(yourAudioCtx, state);
```

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

### Toggle Filter Bypass

Source: https://context7.com/teropa/weq8/llms.txt

Enable or disable bypass for a specific filter band. When bypassed, the filter is removed from the signal chain but retains its settings for later re-engagement.

```typescript
import { WEQ8Runtime } from "weq8";

const audioCtx = new AudioContext();
const weq8 = new WEQ8Runtime(audioCtx);

// Set up a filter
weq8.setFilterType(0, "peaking12");
weq8.setFilterFrequency(0, 1000);
weq8.setFilterGain(0, 6.0);

// Bypass the filter (removes from signal chain)
weq8.toggleBypass(0, true);

// Re-enable the filter
weq8.toggleBypass(0, false);

// Toggle based on current state
const isBypassed = weq8.spec[0].bypass;
weq8.toggleBypass(0, !isBypassed);
```

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