Simple Synthesis - Amplitude Modulation

An addendum to Emmett Corman's Modular Synthesis posts on www.keithmcmillen.com/blog/

by cubicalmonkey

HTML

<script src="https://dl.dropboxusercontent.com/s/9p2za1h0kl30slj/Oscilloscope.js"></script>
<canvas id="oscilloscope"></canvas>
<button class='start'>start</button>
<button class='stop' disabled>stop</button>
<br>
<button class='preset' data-preset='a'>a</button>
<button class='preset' data-preset='b'>b</button>
<button class='preset' data-preset='c'>c</button>
<button class='preset' data-preset='d'>d</button>
<button class='preset' data-preset='e'>e</button>
<button class='preset' data-preset='f'>f</button>
<button class='preset' data-preset='g'>g</button>
<button class='preset' data-preset='h'>h</button>
<button class='preset' data-preset='i'>i</button>
<button class='preset' data-preset='j'>j</button>
<button class='preset' data-preset='k'>k</button>
<button class='preset' data-preset='l'>l</button>
<button class='preset' data-preset='m'>m</button>
<button class='preset' data-preset='random'>random</button>
<div class="tracking-controls">
    <label for='carrier-tracking'>Carrier Tracking
        <input class='tc carrier-tracking' type='radio' name='tracking' />
    </label>
    <label for='modulator-tracking'>Modulator Tracking
        <input class='tc modulator-tracking' type='radio' name='tracking' />
    </label>
    <label for='cm-tracking'>Carrier &amp; Modulator Tracking
        <input class='tc cm-tracking' type='radio' name='tracking' checked />
    </label>
</div>
<br>
<hr>
<label for='carrierF'>carrier-freq
    <input class='carrier-f' type="number" min="0" max="20000" step="1.00" value="218">
</label>
<label for='carrierWaveform'>carrier-waveform
    <select name="carrierWaveform" class="cw">
        <option value="sine">sine</option>
        <option value="square">square</option>
        <option value="sawtooth">sawtooth</option>
        <option value="triangle">triangle</option>
    </select>
</label>
<br>
<hr>
<label for='modulatorF'>modulator-freq
    <input class='modulator-f' type="number" min="0" max="20000" step="1.00"...

CSS

body {
    background-color: rgb(250, 250, 250);
}
button {
    display: inline-block;
    margin-bottom: 20px;
}
label {
    display: block;
    font-family: monospace;
    line-height: 20px;
    width: 255px;
    margin-bottom: 5px;
    clear: both;
}
input[type=radio] {
    float: right;
}
span, input[type=number] {
    background-color: white;
    border: 1px solid #efefef;
    border-radius: 3px;
    display: inline-block;
    width: 70px;
    line-height: 16px;
    text-align: center;
    font-weight: bold;
    padding: 1px 5px;
    float: right;
}
select {
    float: right;
}
hr {
    border-color: rgba(200, 200, 200, 0.1);
}
.preset.active {
    font-weight: bold;
}
#controller {
    overflow: hidden;
}
#controller svg {
    position: relative;
    top: -55px;
    pointer-events: none;
}
@media (min-width: 640px) {
    #controller svg {
        top: -125px;
    }
}
.key {
    cursor: pointer;
    pointer-events: fill;
}
.key:hover, .key.active {
    fill: #00ADEE;
}

JavaScript

var iOS = /iPad|iPhone|iPod/.test(navigator.platform);
var startBtn = document.querySelector('.start'),
    stopBtn = document.querySelector('.stop'),
    carrierFInput = document.querySelector('.carrier-f'),
    modulatorFInput = document.querySelector('.modulator-f'),
    modulatorGInput = document.querySelector('.modulator-g'),
    masterGInput = document.querySelector('.master-g'),
    carrierType = document.querySelector('.cw'),
    modulatorType = document.querySelector('.mw'),
    carrierTracking = document.querySelector('.carrier-tracking'),
    modulatorTracking = document.querySelector('.modulator-tracking'),
    CMTracking = document.querySelector('.cm-tracking')
    presetBtn = document.querySelectorAll('.preset'),
    allKeys = document.querySelectorAll('#kboard > g > path');

var presets = {
    a: {
        cf: 218,
        mf: 478,
        cw: 'sine',
        mw: 'sine',
        modg: 1,
        mg: 0.5
    },
    b: {
        cf: 505,
        mf: 7,
        cw: 'sine',
        mw: 'sawtooth',
        modg: 1.95,
        mg: 0.3
    },
    c: {
        cf: 79,
        mf: 41,
        cw: 'sine',
        mw: 'sawtooth',
        modg: 1.75,
        mg: 0.5
    },
    d: {
        cf: 218,
        mf: 2,
        cw: 'triangle',
        mw: 'square',
        modg: 1.5,
        mg: 0.8
    },
    e: {
        cf: 163,
        mf: 41,
        cw: 'sawtooth',
        mw: 'sawtooth',
        modg: 1.175,
        mg: 0.5
    },
    f: {
        cf: 83,
        mf: 41,
        cw: 'sawtooth',
        mw: 'square',
        modg: 1,
        mg: 0.75
    },
    g: {
        cf: 98,
        mf: 393,
        cw: 'square',
        mw: 'sawtooth',
        modg: 1,
        mg: 0.5
    },
    h: {
        cf: 100,
        mf: 151,
        cw: 'square',
        mw: 'square',
        modg: 0.85,
        mg: 0.75
    },
    i: {
        cf: 747,
        mf: 172,
        cw: 'sine',
        mw: 'square',
        modg: 0.925,
        mg: 0.5
    },
    j: {
        cf:...