Moog filter

Moog filter is named after the “ladder” filter in Moog synthesizers. It’s a voltage controlled filter (named “ladder” after the shape of the circuit) that creates a warm, thick sound. It’s basically a low-pass filter.

Visualization

Quick Start

JavaScript

import { createBitcrusherNode } from "clawdio";

const context = new AudioContext();
const oscillatorNode = context.createOscillator();
oscillatorNode.start();

const createMoogWorklet = async (id: string) => {
  // Create the node using our helper function
  const moog = await createMoogNode(context);

  // Connect the node
  oscillatorNode.connect(moog.node);
  moog.node.connect(context.destination);
};

await createMoogWorklet();

React

import { useCallback, useEffect, useRef } from "react";
import useAudioStore from "@/store/audio";
import { createMoogNode } from "clawdio";
import type { MoogNode } from "clawdio";

type Props = {
  resonance?: number;
  cutoff?: number;
};

const Moog = ({ resonance = 4, cutoff = 0.1 }: Props) => {
  const nodeRef = useRef<MoogNode | null>(null);
  const { audioCtx, addAudioNode, removeAudioNode } = useAudioStore();

  const createNode = useCallback(async () => {
    nodeRef.current = await createMoogNode(audioCtx, 4, 0.1);

    addAudioNode("moog", nodeRef.current.node);
  }, [addAudioNode, audioCtx]);

  useEffect(() => {
    if (!audioCtx || nodeRef.current) return;
    createNode();

    return () => {
      if (nodeRef.current) removeAudioNode("moog");
      nodeRef.current?.node.disconnect();
    };
  }, [audioCtx, createNode, removeAudioNode]);

  useEffect(() => {
    nodeRef.current?.setResonance(resonance);
  }, [resonance]);

  useEffect(() => {
    nodeRef.current?.setCutoff(cutoff);
  }, [cutoff]);

  return <></>;
};

export default Moog;

Controls

Property	Type	Default	Description
Resonance	number	4	Sets base resonance of signal
Cutoff	number	0.1	0 to 1. The amount of cutoff, higher number means stronger effect.

Resonance

const moog = await createMoogNode(context);
const moogNode = moog.node;

const setResonance = (resonance: number) => {
  moogNode.port.postMessage({ type: "set-resonance", data: resonance });
};

// Set the bits inside worklet anytime you need
setResonance(1);

Cutoff

const moog = await createMoogNode(context);
const moogNode = moog.node;

const setCutoff = (cutoff: number) => {
  moogNode.port.postMessage({ type: "set-cutoff", data: cutoff });
};

// Set the bits inside worklet anytime you need
setCutoff(1);