JSFiddle - React, Tailwind, and code Playground

by Derk-Jan Hartman

HTML

<button id="load">Load</button>
    <button id="play">Play!</button>

JavaScript

const audioCtx = new AudioContext();
let buffer = null;

const load = () => {
  const request = new XMLHttpRequest();
  request.open("GET", "freejazz.wav");
  request.responseType = "arraybuffer";
  request.onload = function() {
    let undecodedAudio = request.response;
    audioCtx.decodeAudioData(undecodedAudio, (data) => buffer = data);
  };
  request.send();
};

const play = () => {
  const source = audioCtx.createBufferSource();
  source.buffer = buffer;
  source.connect(audioCtx.destination);
  source.start();
};

document.getElementById( 'load' ).addEventListener("click", load);
document.getElementById( 'play' ).addEventListener("click", play);