JSFiddle - React, Tailwind, and code Playground

by Thomas Roberson

HTML

<button type="button" id="linear" class="btn btn-info btn-lg button-color" >linearRampToValueAtTime</button>
<br>
<br>
<button type="button" id="exp" class="btn btn-info btn-lg button-color" >exponentialRampToValueAtTime</button>
<br>
<br>
<button type="button" id="curv" class="btn btn-info btn-lg button-color" >setValueCurveAtTime</button>
<br>
<br>
<button type="button" id="targ" class="btn btn-info btn-lg button-color" >setTargetAtTime</button>
<br>
<br>
<button type="button" id="stop" class="btn btn-info btn-lg" style="background-color:red" >Stop All Sound</button>
<br>
<br>
<button type="button" id="cancel" class="btn btn-info btn-lg" style="background-color:red" >Cancel Events</button>

JavaScript

window.AudioContext = window.AudioContext || window.webkitAudioContext;

var audioContext = new AudioContext();

var sound;

var oscArray = [];

var globalGain = audioContext.createGain();
globalGain.gain.value = 0.2;

globalGain.connect(audioContext.destination);

function createOsc() {
  var osc = audioContext.createOscillator();
  osc.type = 'square';
  osc.frequency.value = 440;
  return osc;
}

function linear(linearInput) {
  var currentTime = audioContext.currentTime;

  var gain = audioContext.createGain();

  linearInput.connect(gain);

  gain.gain.setValueAtTime(0.01, currentTime);

  gain.gain.linearRampToValueAtTime(0.9, currentTime + 2);

  gain.gain.linearRampToValueAtTime(0.1, currentTime + 5);

  return gain;
}

function expRamp(expInput) {
  var currentTime = audioContext.currentTime;

  // Set value first
  expInput.frequency.setValueAtTime(440, currentTime);

  // Attack
  expInput.frequency.exponentialRampToValueAtTime(5000, currentTime + 2);

  // Decay
  expInput.frequency.exponentialRampToValueAtTime(200, currentTime + 3);

  expInput.frequency.cancelScheduledValues(currentTime + 2.5);

  return expInput;
}

function valCurve(curvInput) {
  var currentTime = audioContext.currentTime;

  // Curve Array values
  var waveArray = new Float32Array(5);
  waveArray[0] = 200;
  waveArray[1] = 700;
  waveArray[2] = 2000;
  waveArray[3] = 100;
  waveArray[4] = 440;

  // Curve audioparam method
  curvInput.frequency.setValueCurveAtTime(waveArray, currentTime + 2, 4);

  return curvInput;
}

function target(targetInput) {
  var currentTime = audioContext.currentTime;

  // Set value first
  targetInput.frequency.setValueAtTime(440, currentTime);

  // Target audioparam method
  targetInput.frequency.setTargetAtTime(880, currentTime + 1, 0.2);

  return targetInput;
}

function playLinear() {
  var osc = createOsc();
  sound = linear(osc);
  sound.connect(globalGain);
  osc.start();

  oscArray.push(osc);

  console.log(oscArray);
}

function...