Turning Bioacoustics into Generative Code: Building an Interactive Birdsong Synthesiser
Recently, I read a fascinating research article detailing how all birdsong—across more than 3,000 avian species—can be broken down into just 8 fundamental acoustic motifs (ranging from pure whistles and frequency sweeps to complex harmonic stacks and FM chirps).
As a web developer and music composer, I immediately wondered: Can we model these acoustic building blocks programmatically using pure Web Audio API?
To test the idea, I built AvesMotif, an interactive ambient generative music web app hosted on Cloudflare Pages.
How the Architecture Works Under the Hood
Building a complex bioacoustic soundscape inside a web browser without relying on pre-recorded audio files requires precise scheduling and custom digital signal processing (DSP):
- Native Web Audio DSP: Every motif is synthesised entirely in code using native
AudioContextnodes—no pre-recorded samples, external audio libraries, or bulky media assets. - Ambient Layering: Soft, detuned sawtooth and square wave pads alongside sub-bass foundations sit under the high-frequency bird motifs, turning raw acoustic events into an evolving ambient soundscape.
- Markov Probabilities & Canvas Spectrogram: A probability matrix continuously triggers motif variations mapped to pentatonic and microtonal scales, accompanied by a real-time HTML5 canvas visualizer color-coded by motif type.
- Zero Build Overhead: Designed as a lightweight, single static file deployed effortlessly via Cloudflare Pages for instant edge distribution and minimal mobile CPU footprint.
It is always satisfying when complex bioacoustic research meets clean browser audio engines.
Explore the Live App
You can experience the interactive synthesiser live in your browser:
👉 avesmotif.kennebec.co.uk