Synthesising Drum Sounds using Web Audio

by Aqilah Misuary

HTML

<button onclick="kick()">Kick</button>

<button onclick="snare()">Snare</button>

<button onclick="hihat()">Hihat</button>

<button onclick="hitom()">Hitom</button>

<button onclick="lowtom()">Hitom</button>

<button onclick="mute()">Mute</button>

JavaScript

var audioContext = new AudioContext(); //Tells the browser we are using web audio api

var mixGain = audioContext.createGain();

//KICK VARIABLES
var osc = audioContext.createOscillator();
var osc2 = audioContext.createOscillator();
var gainOsc = audioContext.createGain();
var gainOsc2 = audioContext.createGain();

//SNARE VARIABLES
var osc3 = audioContext.createOscillator();
var gainOsc3 = audioContext.createGain();

//HI-HAT VARIABLES
var osc4 = audioContext.createOscillator();
var gainOsc4 = audioContext.createGain();

var fundamental = 40;
var ratios = [2, 3, 4.16, 5.43, 6.79, 8.21];

var bandpass = audioContext.createBiquadFilter();
bandpass.type = "bandpass";
bandpass.frequency.value = 10000;

var highpass = audioContext.createBiquadFilter();
highpass.type = "highpass";
highpass.frequency.value = 7000;

//HI-TOM VARIABLES
var osc5 = audioContext.createOscillator();
var gainOsc5 = audioContext.createGain();

//LOW-TOM VARIABLES
var osc6 = audioContext.createOscillator();
var gainOsc6 = audioContext.createGain();

//LOW-TOM
osc6.type = "sine";
//osc6.frequency.value = 200;
gainOsc6.gain.value = 0;

//HI-TOM
osc5.type = "sine";
//osc5.frequency.value = 400;
gainOsc5.gain.value = 0;

//HI-HAT
ratios.forEach(function(ratio) {
osc4.type = "square";
osc4.frequency.value = fundamental * ratio;
});
gainOsc4.gain.value = 0;

//SNARE
osc3.type = "triangle";
//osc3.frequency.value = 500;
gainOsc3.gain.value = 0;

var bandpass2 = audioContext.createBiquadFilter();
bandpass2.type = "bandpass";
bandpass2.frequency.value = 2000;

//KICK
osc.type = "triangle";
osc.frequency.value = 70;
gainOsc.gain.value = 0;
    
osc2.type = "sine";
osc2.frequency.value = 40;
gainOsc2.gain.value = 0;

mixGain.gain.value = 0;

function lowtom() {

gainOsc6.gain.setValueAtTime(0, audioContext.currentTime);
gainOsc6.gain.linearRampToValueAtTime(1, audioContext.currentTime + 0.001);
gainOsc6.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
   ...