JSFiddle - React, Tailwind, and code Playground

HTML

<label>adjust audio gain<br><input type="range" min="0" max="5" value="2.5" step=".5" disabled /></label>
<video src="" id="video" controls="true" crossorigin="anonymous" />

JavaScript

var video = document.getElementById("video");
    var range = document.querySelector("input[type=range]");
    var gainNone;
    range.onchange = (e) => {
      gainNode.gain.value = e.target.value;
    }
    var src = "https://s3.amazonaws.com/mettavr/dev/VfE_html5.mp4";
    fetch(src)
      .then(response => response.blob())
      .then(blob => {
        video.src = URL.createObjectURL(blob);
        var audioCtx = new AudioContext();
        var reader = new FileReader();
        reader.onload = (e) => {
          audioCtx.decodeAudioData(e.target.result, (buffer) => {
          console.log(buffer); // `AudioBuffer`
          // creates a sound source
          var source = audioCtx.createBufferSource();           source.buffer = buffer; 
          // source.connect(audioCtx.destination); 
          gainNode = audioCtx.createGain();
          gainNode.gain.value = 2.5;
          // tell the source which sound to play
          source.connect(gainNode); 
          // connect the gainNode to the context's destination
          // (the speakers)
          gainNode.connect(audioCtx.destination); 
          source.start(0);
          console.log(source, audioCtx);
          range.removeAttribute("disabled")
        });
        }
        reader.readAsArrayBuffer(blob);    
      });