JSFiddle - React, Tailwind, and code Playground

by eliot winder

HTML

<input type='button' id='startsource' value='start source'><br>
<input type='button' id='startmod' value='start mod'><br>
<input type='button' id='startboth' value='start both'><br>
<br>
<input type='button' id='stopsource' value='stop source'><br>
<input type='button' id='stopmod' value='stop mod'><br>
<input type='button' id='stopboth' value='stop both'><br>
    Gain.gain:<div id='gainmeter'></div>

JavaScript

//create audio context
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new window.AudioContext();

//create source and gain, connect them
var source = context.createOscillator();
var gain = context.createGain();
source.connect(gain);

//create modulator and gain for it and connect them
var mod = context.createOscillator();
var modAmp = context.createGain(); 
mod.connect(modAmp);

//connect modulator gain node to audio param 
modAmp.connect(gain.gain);

//connect to audio context
gain.connect(context.destination);

//source values
source.frequency.value = 220;
gain.gain.value = 0.5;

//mod values
mod.frequency.value = 6;
modAmp.gain.value = 0.5;

setInterval(function() {
      $('#gainmeter').text(gain.gain.value);
    },
    600
);
           
//start/stop on buttons
$('#startsource').click(function(){
    source.start(0);
});

$('#startmod').click(function(){
    mod.start(0);
});

$('#startboth').click(function(){
    source.start(0);
    mod.start(0);
});

$('#stopsource').click(function(){
    source.stop(0);
});

$('#stopmod').click(function(){
    mod.stop(0);
});

$('#stopboth').click(function(){
    source.stop(0);
    mod.stop(0);
});