JSFiddle - React, Tailwind, and code Playground

by Matt

HTML

<div id="root">

  <button id="button">
  Play
  </button>

  <label>
    <input id="slider" type="range" value=1 min=0 max=20 step="0.1" />
    Gain (<span id="gain">1</span>)
  </label>

</div>

JavaScript

async function main() {
	root.hidden = true
  
	const audioContext = new AudioContext();
	const gainNode = audioContext.createGain();
	gainNode.gain.value = 1;
  
  const compressor = audioContext.createDynamicsCompressor();

  // const url = "https://rawcdn.githack.com/mrdoob/three.js/841d2e791d3e8a2463322c5ca31b16956828b91c/examples/sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3"
  const url = "https://nyc3.digitaloceanspaces.com/hallway-public/test/speech.mp3"
	const audioBuffer = await fetch(url)
		.then(res => res.arrayBuffer())
		.then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))

  button.onclick = () => {
  	console.log("click")
    
    const source = audioContext.createBufferSource();
		source.buffer = audioBuffer;
    source.loop = true

		source.connect(gainNode).connect(compressor).connect(audioContext.destination);
    source.start()
  }
  
  const updateGain = () => {
    gainNode.gain.value = Number(slider.value)
    gain.innerText = slider.value
  } 
  
  slider.oninput = updateGain
  updateGain()
  
  root.hidden = false

}

main()