How to make a web browser scream

Did you know that there is a way to make music directly on the web browser? Thanks to something called Web Audio API we only need few lines of JavaScript code! Of course before we create music, we should be able to make some sounds and this is what I will try to do in this post.

A quick start is to use the JavaScript console of a Chrome browser. We can open the console by clicking Shift+Ctrl+J on the keyboard.

The first thing we have to do is to define a context by typing:

var context = new AudioContext()

We can think of "context" as the virtual area within which we will create the sound.

Then, we have to create a sound source. In this example we are going to create an oscillator:

var oscillator = context.createOscillator()

An oscillator is a repeating waveform with a fundamental frequency and peak amplitude and it forms the basis of most popular synthesis techniques today. (source: wikibooks, "Sound Synthesis Theory"

Finally we should connect the sound source to the "destination" output, usually our computer's speakers.


And fire it up with (please, take off your headphones!):

oscillator.start(0) and oscillator.stop(0) to stop it.

Voila! We have created a creaming browser!

It is really amazing what we can do with the Web Audio API. I highly recommend you to watch a rocking presentation by Stuart Memo to get inspired and learn more about it.

I am sure that there are far too many ways that museums could use Web Audio API to create on-site and online applications. Probably the most obvious are:
1. apps to explain soundwaves
2. musical instruments
3. sound mashup and mixes
4. soundscapes

I will try to explore few of these possibilities further and share code and experience in future posts. In the meantime, if you have an idea of a project please, do not hesitate to contact me! Let's do it together!