1

I am working on VUI interface with Reactjs frontend. I got a BLOB file that I can play but I want to convert it to .WAV file using REACT or Javascript to send it to my server.

I tried lot of things, but found no solution

toggleRecording() {
    if (this.state.start === 1) {
      console.log("we start recording", this.state.start)
      this.setState({ start: 0, recognition: "" })

      const constraints = {
        audio: {
          sampleRate: 16000,
          channelCount: 1,
        }
      }

      navigator.mediaDevices.getUserMedia(constraints)
        .then(stream => {
          console.log(this);
          this.recorder = new MediaRecorder(stream);
          this.recorder.start();

          const audioChunks = [];
          this.recorder.addEventListener("dataavailable", event => {
            audioChunks.push(event.data);
          });

          this.recorder.addEventListener("stop", () => {
            const audioBlob = new Blob(audioChunks, { 'type': 'audio/wav' });

            const audioUrl = URL.createObjectURL(audioBlob);

            console.log("test: ", audioUrl)
            console.log(audioBlob.type)

            fetch('http://127.0.0.1:6060/api/sendaudio', {
              method: "post",
              headers: { 'Content-Type': 'audio/wav' },
              body: audioBlob
            })
              .then(response => {
                return response.text()
              }).then(text => {
                console.log(text);
                this.setState({ recognition: text })
              });

            //to play the audio file:
            const audio = new Audio(audioUrl);
            audio.play();
          });
        });
    }

I expect to get a Wav file to post to my server but don't know how to do that ....

Thomas Che
  • 19
  • 2
  • Possible duplicate of [HTML5 record audio to file](https://stackoverflow.com/questions/16413063/html5-record-audio-to-file) – Herohtar Jun 03 '19 at 03:47
  • Also https://stackoverflow.com/questions/13333378/how-can-javascript-upload-a-blob – Herohtar Jun 03 '19 at 03:54
  • https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data#Sending_binary_data – Herohtar Jun 03 '19 at 03:55

1 Answers1

0

You can try this package if you don't have a problem to add new dependency: https://www.npmjs.com/package/audiobuffer-to-wav

Hope it will work for you

Oded BD
  • 2,788
  • 27
  • 30