I work primarily as a web developer, but you might not know that I'm also a musician. I have a special appreciation for the creativity found in experimental electronic music. Recently I was curious about where audio tools for the web were at, and I was impressed by the HTML <audio> element, though I ran up against what I considered a pretty big shortcoming: it can't loop seamlessly.

That's what led me the WebAudio API. It's an API intended for people like me who have a little background in messing with sound and I had no idea it was out there. I quickly learned how to repeat an audio clip without the interruption in the loop provided by the standard <audio> element, and in the process I did some reading about WebAudio's other capabilities.

A Few WebAudio Offerings

WebAudio features a number of different types of audio sources; in the documentation I noticed an oscillator type and I was inspired to see what kind of web-based synthesizer I could make with the WebAudio API. My goal wasn't to make something with a keyboard for playing pop music, but something simpler, more suited to creating atmosphere or sound effects.

WebAudio uses a metaphor carried over from physical sound equipment that describes the flow of audio through a number of nodes connected in a designated order. In JavaScript, I set up a couple oscillator nodes and connected them to the WebAudio destination; it felt like the JavaScript equivalent of plugging instruments and effects units into a mixer. I added some other nodes like gain nodes to control volume at different points in the “circuit”, and convolution nodes to add reverb.

The controls for the synth? Simple HTML <input> elements. I was absolutely tickled to learn that a range input would stand in for a potentiometer in this WebAudio world. One of the reasons I left my synth visually unstyled is to emphasize the webbiness of it all—playing sounds involves yanking a bunch of browser-default sliders around and selecting from dropdown menus. It brings a smile to my face.

Introducing Dulce Baby

The final features of my synth, the Dulce Baby, include one oscillator with variable waveform, coarse tone control, and volume control, another oscillator that plays a drone and fine tone control, and a master gain for overall volume. The drone options are frequencies borrowed from Cousto's The Cosmic Octave: they're the frequencies of the planets in our solar system.

Time to Explore

Overall the WebAudio API is a very exciting discovery for me. It's inspired this start to a new series about experimenting with WebAudio. Today I haven't shown much process or code, but in the future this series will delve more into the nitty gritty. Read along for some creative coding and non-visual web design!