Audio Processing Starter Kit

€79 — One-time purchase

A complete, production-ready starter template for building browser-based audio processing applications. Includes AudioWorklet setup, real-time visualisation, and example DSP processors — so you can skip the boilerplate and start building immediately.

---

What’s included

AudioWorklet Boilerplate

Pre-configured AudioWorklet setup with TypeScript. Message passing, parameter handling, and processor registration — all wired up.

Real-Time Visualisation

Waveform and spectrum analysers connected to the audio graph. Canvas-based rendering with configurable styling.

Audio File Loader

Drag-and-drop file loader with format detection. Supports WAV, MP3, OGG, FLAC, and more. Includes decode and buffer management.

Example DSP Processors

Working implementations of a compressor, parametric EQ, and simple reverb — all running in AudioWorklets.

---

Technical details

• TypeScript throughout — Processor code, UI code, and build config all in TypeScript. Full type safety from audio thread to UI.
• Bun build pipeline — Fast builds with Bun. Hot module replacement for development. Production builds with tree-shaking.
• AudioWorklet-first — All DSP runs in AudioWorklets, not the main thread. Glitch-free audio processing with proper thread isolation.
• Modular architecture — Each processor is a self-contained module. Add, remove, or swap processors without touching the audio graph.
• Responsive UI — Mobile-friendly layout with touch support for parameter controls.

Project structure

audio-starter/
├── src/
│   ├── processors/       # AudioWorklet processors
│   │   ├── compressor.ts
│   │   ├── eq.ts
│   │   └── reverb.ts
│   ├── ui/               # UI components
│   │   ├── waveform.ts
│   │   ├── spectrum.ts
│   │   └── controls.ts
│   ├── audio-graph.ts    # Audio routing and management
│   ├── file-loader.ts    # Drag-and-drop + decode
│   └── index.ts          # Entry point
├── public/
│   └── index.html
├── bunfig.toml
└── README.md

Example: Adding a custom processor

src/processors/my-filter.ts

class MyFilterProcessor extends AudioWorkletProcessor {
  static get parameterDescriptors() {
    return [{ name: "cutoff", defaultValue: 1000, minValue: 20, maxValue: 20000 }];
  }

  process(inputs: Float32Array[][], outputs: Float32Array[][], parameters: Record<string, Float32Array>) {
    const input = inputs[0];
    const output = outputs[0];
    const cutoff = parameters.cutoff;
    // Your DSP code here
    for (let channel = 0; channel < input.length; channel++) {
      for (let i = 0; i < input[channel].length; i++) {
        output[channel][i] = input[channel][i]; // Replace with your filter
      }
    }
    return true;
  }
}

registerProcessor("my-filter", MyFilterProcessor);

---

Who it’s for

• Audio developers building browser-based tools who want to skip setup and get straight to DSP
• Startups prototyping audio products and need a solid technical foundation
• Students learning Web Audio API and AudioWorklet who want working examples to study and modify

---

Buy now

After purchase, you’ll receive a downloadable zip with the full project and documentation.

← Back to Store