Music Icon

Just wanted to make a simple music icon. Created using PixelMator.

JavaScript Synthesizer

I have always loved synthesizers. Using window.AudioContext, I was able to create my own software synthesizer. An oscillator is the most basic fundamental unit of a synthesizer, using the AudioContext you can create an oscillator:

audioContext.createOscillator();

By setting its wave type and frequency you can generate any sound you can imagine. I expanded the project to support both a computer and onscreen graphical keyboard. Multiple modules were made to seperate each of the synthesizer components.

The keyboard pictured below was created using PixelMator, a click on the keys would produce a sound corresponding to piano key frequencies found here: https://en.wikipedia.org/wiki/Piano_key_frequencies.

The calculation for converting the paino key to the oscillator frequency is as follows:

var getKeyFrequency = function (key) {
    return Math.pow((Math.pow(2, 1 / 12)), (key - 49)) * 440;
}

A MIDI module was also added to support external keyboards. The follow code is a snippet of the core MIDI functionality:

navigator.requestMIDIAccess().then(function (success) {
    midiInputDevices = success.inputs();
    midiInputDevices[0].onmidimessage = fn;
},
function (error) {
    //errorFn
});

Finally, slider controls were added to manually tweak each oscillators wave type and frequency. When the frequencies compliment one another, you hear an awesome polyphonic sound.