Make WAV file from raw data

Question

I use this examples for capture data from device microphone, but I can't figure how to convert it to WAV file for send to my server.

<script>
  var handleSuccess = function(stream) {
    var context = new AudioContext();
    var source = context.createMediaStreamSource(stream);
    var processor = context.createScriptProcessor(1024, 1, 1);

    source.connect(processor);
    processor.connect(context.destination);

    processor.onaudioprocess = function(e) {
      // Convert this to WAV and send to server
      console.log(e.inputBuffer);
    };
  };

  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
      .then(handleSuccess);
</script>

Answer 1

^{Disclosure synth-js is written by me.}

The following script will create a valid WAV file as a Blob, containing the first 5 seconds of audio:

<script src="https://unpkg.com/synth-js/dst/synth.min.js"></script>
<script>
  var handleSuccess = function(stream) {
    var context = new AudioContext();
    var source = context.createMediaStreamSource(stream);
    var processor = context.createScriptProcessor(1024, 1, 1);
    var data = [];

    source.connect(processor);
    processor.connect(context.destination);

    processor.onaudioprocess = function(e) {
      data.push.apply(data, e.inputBuffer.getChannelData(0));
      // cut off after 5 seconds
      if (data.length >= context.sampleRate * 5) {
        context.close();
        var track = stream.getAudioTracks()[0];
        track.stop();
        // Convert this to WAV
        var wav = new synth.WAV(1, context.sampleRate, 16, true, data);
        var blob = wav.toBlob();
        // do something with blob
        var src = URL.createObjectURL(blob);
        var audio = new Audio();
        audio.controls = true;
        document.body.appendChild(audio);
        // play back audio
        audio.addEventListener('canplaythrough', function() { audio.play(); });
        audio.src = src;
      }
    };
  };

  navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(handleSuccess);
</script>

You can try this on JSFiddle since Stack Snippets do not allow access to the microphone.

The line var wav = new synth.WAV(1, context.sampleRate, 16, true, data); creates a new WAV object with 1 channel, a sample rate that matches the input, 16 bits per sample in the WAV binary, in little endian format (required), with the PCM data collected by the onaudioprocess events.