WebAudio Experiences


My combined interests in technology, music and synthesizers made me decide to take a look at the HTML-5 audio-api, also known as Webaudio. I had some experience in the past with synthesizers, and even made one myself, the Chorosynth, based on an article in the Elektor magazine somewhere around 1980.

My version was based on the schematics from the article, but I designed the pcb's myself and added a waveshaper, a filter section, and a reverberation unit, see the picture to the right.

So what about webaudio, is it possible to 're-create' a synthesizer or other electronic instrument using audionodes, put it on a webside and make music in your browser? How good would it be, does it sound professional? As the W3C Audio Working Group writes in this document, that is their mission.

Read about my experiences in detail, there is also a page about the use of samples, or skip right away to one of the demo's and try for yourself. It's possible to play the demo's using a MIDI keyboard when your browser is MIDI enabled (to date only Google Chrome, Opera and derivatives).

The Hammond Organ demo

The Hammond™ organ is an example of additive synthesis. The demo has 2 manuals with a drawbar for each manual, a Lesly simulation, and a simulation of the native Hammond vibrato and chorus. The demo is polyphonic, it uses 9 oscillatornodes and 11 gainnodes foar each tone. Click on the image to take a try (don't forget to pull some bars first), and read about the technical details.

The Minimoog simulation

The Minimoog™ is the most popular analog synthesizer ever, it was used by Kraftwerk, my favourite synthesizer band of the past. It is an example of subtractive synthesis. I tried to recreate it in webaudio using an audiogram that resembles the diagram in the usermanual as much as possible. Try the demo by clicking the image, and read about the technical details. The demo has a menu for saving and loading of patches, activated by pressing the F1 key if you use a keyboard, or by tapping the phone volume button. The LFO waveform is switched from triangle to pulse and back by double click or tap on the LFO button. The simulation is best shown in fulscreen mode (press F11).

If you have questions or comments you can send me a message.

©2018 vdVeen.net