title: Extracting audio from a video file
body: <p><strong>Edit</strong>: <a href="https://stackoverflow.com/questions/34984501/get-audio-from-html5-video">This post</a> is no duplicate of mine. I am trying to extract the audio data as binary, got no problems with playing the audio file as separate as I mentioned before.</p>
  
  <p>I am trying to extract audio from a video file on client-side by using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API" rel="noreferrer">Web Audio Api</a>.</p>
  
  <pre><code>var audioContext = new(window.AudioContext || window.webkitAudioContext)();
  fileData = new Blob([input.files[0]]);
  var videoFileAsBuffer = new Promise(getBuffer);
  videoFileAsBuffer.then(function (data) {
      audioContext.decodeAudioData(data).then(function (decodedAudioData) {
          mySoundBuffer = decodedAudioData;
          soundSource = audioContext.createBufferSource();
          soundSource.buffer = mySoundBuffer;
          // soundSource.connect(audioContext.destination);
          // soundSource.start();
      });
  </code></pre>
  
  <p>When I uncomment the two lines at the end, I am hearing the sound of the uploaded video file. Though, when I create a link to download the file with the help of <code>getChannelData</code> method, it's almost the same size as video file.</p>
  
  <p>I was expecting <code>decodedAudioData</code> to have only audio binary data, and send that to my webservice, which is the only one I need. However, that didn't work out as I expected. Anyone knows a way to extract audio of a video file on client-side? Thanks in advance.</p>
  
  <p>Here is the <code>getBuffer</code> method in case anyone wants to know:</p>
  
  <pre><code>function getBuffer(resolve) {
      var reader = new FileReader();
      reader.onload = function () {
          var arrayBuffer = reader.result;
          resolve(arrayBuffer);
      }
      reader.readAsArrayBuffer(fileData);
  }
  </code></pre>
  
  <p><strong>Edit</strong>: I was able to decode the video file and get audiobuffer by using <a href="https://developer.mozilla.org/tr/docs/Web/API/OfflineAudioContext" rel="noreferrer">OfflineAudioContext</a> inside <em>decodeAudioData</em> function.</p>
  
  <pre><code>var offlineAudioContext = new OfflineAudioContext(2, 44100 * 100, 44100);
  var soundSource = offlineAudioContext.createBufferSource();
  ...
  soundSource.connect(offlineAudioContext.destination);
  soundSource.start();
  offlineAudioContext.startRendering().then(function (renderedBuffer) {
      console.log(renderedBuffer); // outputs audiobuffer
      var song = audioContext.createBufferSource();
      song.buffer = renderedBuffer;
      song.connect(audioContext.destination);
      song.start();
  }).catch(function (err) {
      console.log('Rendering failed: ' + err);
  });
  </code></pre>
  
  <p><code>renderedBuffer</code> is an audiobuffer, had no problem outputting the data, tested with <a href="https://www.audacityteam.org/" rel="noreferrer">Audacity</a>'s import raw data option. But the problem is, the new file (filled with <code>renderedBuffer.getChannelData(0)</code>) has higher size than the original video has. Isn't that supposed to have lower size since it only contains audio of the video file?</p>