Audible Code

Stian Veum Møllersen

@mollerse

I like music.

Ok, I have a confession to make - pause - I like music. This is usually the place where i make a joke about those who know me not being suprised, but in this crowd I don't think i know all that many people - So that wont work. But trust me, it would have been funny. So - I have loved music since I was very young. All the way back to my first CD from Ace of Base in the early 90s.

I also like programming.

This might be less suprising, given where we are, but I also really enjoy making things with code. I love the way code gives me an outlet for creativity and experimentation. Write a couple of lines of code and the most wonderous things can happen on your screen - pure magic.

Music + Programming = <3

The thought of combining two of my favourite things have allways been a dream of mine. Especially because I dont really have any talent whatsoever for traditional instruments - maybe except for finger-drums. Just ask my colleagues. That is why I got so exicted (yes, this is a Pointer Sisters reference) that I just couldn't hide it when I discovered that I could generate sounds with JavaScript in the browser. Yes! Finnaly my turn to rock out!

Enter WebAudio

WebAudio has existed in various forms since about 2010. It has many exciting abilities, but today we will take a closer look at what it can offer us in the form of audio synthesis - the creation of sound.

Hello WebAudio

var context = new AudioContext();

var oscillator = context.createOscillator();
var amp = context.createGain();

oscillator.connect(amp);
amp.connect(context.destination);

oscillator.start();

amp.gain.value = 1;

This is a hello world of sorts using WebAudio.

That was a lot to take in

That was a lot to take in. Oscillators? Gain? Amp? Context?

The WebAudio graph

If we visualize what we just made in something more digestable, like the WebAudio debugger graph from Firefox, we can see more clearly. An oscillator is a component that generates a signal with a given frequency. Some of you might remember this from school. A Gain node is a different kind of node that functions kind of like a gate. We can manipulate the gain-value of the Gain node and control how much of the signal from the oscillator we let through. We can use this to dynamically turn the sound on and off.

Make some noise!

function Note() {
  //Initialization and node-creation here

  function start() {
    amp.gain.value = 1;
  }
  function stop() {
    amp.gain.value = 0;
  }

  return {start, stop};
}

MIDI — Musical Instrument Digital Interface

A standard which defines a protocoll, digital interfaces and connectors for musical instruments.

Connect a MIDI-device

navigator.requestMIDIAccess()
  .then(midiConnected);

function midiConnected(midi) {
  for(entry of midi.inputs.values()) {
    entry.onmidimessage = function(msg) {
      var [code, note, velocity] = msg.data;

      code === 144 ? on(note) : off(note);
    };
  }
}

Playing different notes

function frequencyFromNoteNumber(note) {
  return 440 * Math.pow(2,(note-69)/12);
}

oscillator.frequency.value =
  frequencyFromNoteNumber(note);

Change the sound

oscillator.type = 'sawtooth';

Polyphonic synth

var notes = {};
function on(note) {
  var n = Note(note);
  notes[note] = n;
  n.start();
}
function off(note) {
  notes[note].stop();
  delete notes[note];
}

The Supersaw

Multiple detuned sawtooth oscillators. Heavily used in the EDM style of music.

Originally from the Roland JP-8000. It was made to emulate more than one sawtooth oscillator. Each sawtooth oscillator is slightly detuned against one another. This sort of sound gained some notoriety in the early 2000s with the rise of electronic dance music.

The Supersaw effect

function makeSaw(i, numSaws) {
  //Oscillator creation and init
  oscillator.detune.value =
    -detune + i * 2*(detune/(numSaws-1));
}

//Inside Note-function
for (var i = 0; i < numSaws; i++) {
  makeSaw(i, numSaws);
}

What have we made?

Demo!

Congratulations!

You are now musicians.

Thanks for listening!

Stian Veum Møllersen

@mollerse