The Web Audio graph, drawn as nodes
The Web Audio API is a graph of audio nodes, and that is exactly what a VerkLabs instrument is: the nodes are real Web Audio nodes, wired together by dragging instead of by connect(). Students can see and hear a graph before they write the code for one, or build the same sound in both and compare. It is a visual companion to a course that teaches the API in JavaScript, not a substitute for writing code.
Node by node
These VerkLabs nodes are built on the Web Audio node on the right. Where a node adds something of its own, the notes say so.
| VerkLabs node | Web Audio | Notes |
|---|---|---|
| Oscillator | OscillatorNode | Waveform and frequency, with the frequency wireable from another node. |
| Gain, Mixer | GainNode | A Mixer is several signals summed into one. |
| Filter | BiquadFilterNode | Lowpass, highpass and bandpass, with frequency and Q. |
| Delay | DelayNode | With feedback and a wet/dry mix. |
| Reverb | ConvolverNode | Generated from a decay time, so students do not need an impulse response file. |
| Compressor | DynamicsCompressorNode | Threshold, ratio, attack and release. |
| Pan | StereoPannerNode | -1 left to 1 right. |
| Distortion | WaveShaperNode | Soft clip, hard clip and fold curves, with oversampling. |
| Noise, Sample | AudioBufferSourceNode | Noise is a short generated buffer, looped. A Sample plays a loaded recording, pitched to the note. |
| Envelope, LFO, Param | automation of AudioParams | Control values that shape other nodes' parameters over time, comparable to scheduling changes on an AudioParam. |
| Microphone | a media stream source | Live input, with a browser permission prompt. |
| Instrument Output | AudioContext.destination | Where the graph ends. |
See the graph before writing it. A student can drag an oscillator through a filter and an envelope into the output, hear it, then write the same chain in JavaScript and compare.
Experiment with ideas the code course is about. Wire an envelope into a filter, an LFO into pitch, or velocity into brightness, and hear what each does without debugging a script first.
One graph per note. Every note plays its own copy of the instrument, which is a good way to show why a polyphonic synth creates new nodes per voice.
Edit while it plays. Notes already sounding finish with the old version and every new note uses the new one, so a student hears a change straight away.
What it deliberately does not do
Students do not write JavaScript against the audio graph here. There is no AudioWorklet or custom processor, and the formula nodes work on control values at the frame rate, not on samples.
The node list covers the common building blocks. It does not expose analyser, splitter, panner 3D or the rest of the API.
An instrument is saved as a VerkLabs file you can share and import, not as a JavaScript module.
Beyond sound
The same editor builds shaders, and the timeline that plays the instruments can drive the visuals, so a Web Audio course that ends in an audio-reactive piece can stay in one tool. The Instruments and Music chapter of the manual lists every node.
Try it, or talk it through
Free, in a browser tab, nothing to install. The guided lessons run beside a student's own project, so you can try one yourself in a few minutes. If you would like a short demo, example projects or a conversation about how it could sit next to your course, get in touch.
Try the lessons Teaching with VerkLabs Email education@verklabs.ai