JSFiddle - React, Tailwind, and code Playground

by Aqilah Misuary

HTML

<button onclick="kick()">Click me</button>

JavaScript

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

var osc = audioContext.createOscillator();
var osc2 = audioContext.createOscillator();
var gainOsc = audioContext.createGain();
var gainOsc2 = audioContext.createGain();
var mixGain = audioContext.createGain();
//var filter = audioContext.createBiquadFilter();


osc.type = "triangle";
osc.frequency.value = 100;
gainOsc.gain.value = 0;
    
osc2.type = "sine";
osc2.frequency.value = 50;
gainOsc2.gain.value = 0;
    
function kick() {    
    
mixGain.gain.value = 0.8;

//start fitler settings
//filter.type = "lowpass";
//filter.frequency.value = 60;
//filter.Q.value = 40; //adjust bandwidth
//end filter settings

//console.log(filter.type)

//function kick() {
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);
    
//};



//gainOsc.gain.setValueAtTime(1, audioContext.currentTime);
//gainOsc.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.5);
//gainOsc.gain.linearRampToValueAtTime(0, audioContext.currentTime + 4);

osc.connect(gainOsc);
osc2.connect(gainOsc2); 
gainOsc.connect(mixGain);
gainOsc2.connect(mixGain);
//gainOsc.gain.value = 0.3;
//gainOsc.connect(audioContext.destination); //Routes the audio to your speakers
    
    mixGain.connect(audioContext.destination);
}

//mixGain.connect(audioContext.destination);

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