CODEWITHSUNDEEP
javascriptaudio
jeo.e
jeo.e

Reputation: 253

How to use Web Audio API to create .wav file?

I am pretty sure I did everything correct but when I try to play or download the file nothing plays. I am using web audio api to record audio from the microphone to a WAV format. I am using this library to create the .wav file. It seems like nothing is being encoded. 

    navigator.mediaDevices.getUserMedia({
        audio: true,video:false
    })
    .then((stream) => {
    var data
    context = new AudioContext()

    var source = context.createMediaStreamSource(stream)
    var scriptNode = context.createScriptProcessor(8192, 1, 1)

    source.connect(scriptNode)
    scriptNode.connect(context.destination)

    encoder = new WavAudioEncoder(16000,1)
    scriptNode.onaudioprocess = function(e){

        data = e.inputBuffer.getChannelData('0')
        console.log(data)
        encoder.encode(data)



    }
    $('#stop').click(()=>{
        source.disconnect()
        scriptNode.disconnect()
        blob = encoder.finish()
        console.log(blob)
        url = window.URL.createObjectURL(blob)
// audio source
        $('#player').attr('src',url)
// audio control
        $("#pw")[0].load()
    })


    })

Upvotes: 4

Views: 7195

Answers (2)

Bhimashankar Mantur
Bhimashankar Mantur

Reputation: 199

use recordRTC for recording video and audio, I used in my project, it's working well, here is the code to record audio using recordrtc.org

 startRecording(event) { // call this to start recording the Audio( or video or Both)
    this.recording = true;
    let mediaConstraints = {
      audio: true
    };

    // Older browsers might not implement mediaDevices at all, so we set an empty object first
    if (navigator.mediaDevices === undefined) {
      navigator.mediaDevices = {};
    }

    // Some browsers partially implement mediaDevices. We can't just assign an object
    // with getUserMedia as it would overwrite existing properties.
    // Here, we will just add the getUserMedia property if it's missing.
    if (navigator.mediaDevices.getUserMedia === undefined) {
      navigator.mediaDevices.getUserMedia = function(constraints) {

        // First get ahold of the legacy getUserMedia, if present
        var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

        // Some browsers just don't implement it - return a rejected promise with an error
        // to keep a consistent interface
        if (!getUserMedia) {
          return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
        }

        // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
        return new Promise(function(resolve, reject) {
          getUserMedia.call(navigator, constraints, resolve, reject);
        });
      }
    }


    navigator.mediaDevices.getUserMedia(mediaConstraints)
      .then(successCallback.bind(this), errorCallback.bind(this));
  }

 successCallback(stream: MediaStream) {  
    var options = {
          type: 'audio' 
        };
        this.stream = stream;
        this.recordRTC = RecordRTC(stream, options);
        this.recordRTC.startRecording();
  }

errorCallback(stream: MediaStream) {
     console.log(stream);
  }

 stopRecording() { // call this to stop recording 
    this.recording = false;
    this.converting = true;
    let recordRTC = this.recordRTC;
    if(!recordRTC) return;
    recordRTC.stopRecording(this.processAudio.bind(this));
    this.stream.getAudioTracks().forEach(track => track.stop());
  }



processAudio(audioVideoWebMURL) {
    let recordRTC = this.recordRTC;
    var recordedBlob = recordRTC.getBlob(); // you can save the recorded media data in various formats, refer the link below.
    console.log(recordedBlob)
    this.recordRTC.save('audiorecording.wav');
    let base64Data = '';
    this.recordRTC.getDataURL((dataURL) =>  {
      base64Data = dataURL.split('base64,')[1];
      console.log(RecordRTC.getFromDisk('audio', function(dataURL,type) {
        type == 'audio'
      }));
      console.log(dataURL);
     })
}

Note that you cannot record the audio/video from the live site in Google Chrome unless your site is https enabled

Upvotes: 1

jeo.e
jeo.e

Reputation: 253

I figured it out! To help anyone who needs to do the same thing. It uses Web Audio API and this javascript library

navigator.mediaDevices.getUserMedia({
    audio: true,video:false
})
.then((stream) => {


context = new AudioContext()

var source = context.createMediaStreamSource(stream)

var rec = new Recorder(source)
rec.record()




$('#stop').click(()=>{
rec.stop()
blob = rec.exportWAV(somefunction) // exportWAV() returns your file 
})

Upvotes: 3

Related Questions