JSFiddle - React, Tailwind, and code Playground

by Aqilah Misuary

HTML

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

JavaScript

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

var mixGain = audioContext.createGain();

function kickout(){

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

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

gainOsc.gain.setValueAtTime(0, audioContext.currentTime);
gainOsc.gain.linearRampToValueAtTime(1, audioContext.currentTime + 0.001);
gainOsc.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
gainOsc.connect(audioContext.destination); 
    
gainOsc2.gain.setValueAtTime(0, audioContext.currentTime);
gainOsc2.gain.linearRampToValueAtTime(1, audioContext.currentTime + 0.001);
gainOsc2.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
gainOsc2.connect(audioContext.destination);
    
osc.connect(gainOsc);
osc2.connect(gainOsc2); 
gainOsc2.connect(gainOsc);
gainOsc.connect(mixGain);
    
mixGain.gain.value = 0.8;

mixGain.connect(audioContext.destination);

osc.start(audioContext.currentTime);
osc2.start(audioContext.currentTime);

};


mixGain.gain.value = 0;