JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyTitle</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <input type="file" id="file">
</body>
</html>

JavaScript

var audioContext = new(window.AudioContext || window.webkitAudioContext)();
var reader = new FileReader();
var myBuffer;

const sampleRate = 16000;
const numberOfChannels = 1;

document.getElementById('file').onchange = function() {

	reader.onload = function () {
    var videoFileAsBuffer = reader.result; // arraybuffer
    audioContext.decodeAudioData(videoFileAsBuffer).then(function (decodedAudioData) {
    
      var duration = decodedAudioData.duration;

      var offlineAudioContext = new OfflineAudioContext(numberOfChannels, sampleRate * duration, sampleRate);
      var soundSource = offlineAudioContext.createBufferSource();

      myBuffer = decodedAudioData;
      soundSource.buffer = myBuffer;
      soundSource.connect(offlineAudioContext.destination);
      soundSource.start();

      offlineAudioContext.startRendering().then(function (renderedBuffer) {
        console.log(renderedBuffer); // outputs audiobuffer
      }).catch(function (err) {
        console.log('Rendering failed: ' + err);
      });
    });
	};
  
	reader.readAsArrayBuffer(this.files[0]); // video file

};