JSFiddle - React, Tailwind, and code Playground

by jeffgw

HTML

<form id="playerForm">
  <p><input type="file" id="FileSelect" /></p>
  <p><input type="button" id="playButton" value="Play" /></p>
</form>
<button>▶</button>

JavaScript

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

var audioContext = new AudioContext();
var merger = audioContext.createChannelMerger(2);
merger.connect(audioContext.destination);

var button = document.querySelector('button');

button.addEventListener('click', playNewSound);

function playNewSound() {
  var oscillator = audioContext.createOscillator();
  //oscillator.type = 'square';'square';'sawtooth', 'triangle','
  oscillator.type = 'sine';
  oscillator.frequency.value = 800 // value in hertz
  oscillator.connect( merger, 0, 0 );
  var gain = audioContext.createGain();
  gain.gain.value = 0.0;
  oscillator.connect(gain);
  gain.connect( merger, 0, 1 );
  gain.connect(audioContext.destination);

  oscillator.start(0);
  oscillator.stop(audioContext.currentTime + 0.1);
}