Question: record audio and upload to S3

[visualight]

I'm using the wavesurfer.js library and its record plugin for a vuejs project. I'm using the record plugin to create a voice message.

I would like to be able to retrieve the blob of the audio file and upload it to my Amazon S3 server.

After a lot of research, I've managed to create this code, but I can't figure out how I can retrieve the audio file created by the record plugin and upload it to the server.

What do I need to do?

import WaveSurfer from 'wavesurfer.js';
import RecordPlugin from 'wavesurfer.js/dist/plugins/record';
import AWS from 'aws-sdk';

export default {
  data() {
    return {
      audioUrl: ''
    };
  },
  mounted() {
    this.initializeWaveSurfer()
  },
  methods: {
    initializeWaveSurfer() {
      this.wavesurfer = WaveSurfer.create({
        container: '#visualizer',
        barWidth: 3,
        barHeight: 1.5,
        cursorWidth: 0,
        height: 46,
        responsive: true,
        waveColor: 'rgba(108,115,202,0.3)',
        cursorColor: 'transparent',
      })

      this.record = this.wavesurfer.registerPlugin(RecordPlugin.create());
    },
    startRecording() {
      this.isRecording = true
      this.record.startRecording();
    },
    stopRecording() {
      this.isRecording = false
      this.record.stopRecording();
      this.uploadAudio(*blob*) // Need tu upload here
    },
    uploadAudio(blob) {
      const s3 = new AWS.S3({
        accessKeyId: 'xxxx',
        secretAccessKey: 'xxxx',
        region: 'xxxx'
      })

      const params = {
        Bucket: 'xxxx',
        Key: 'test.webm',
        Body: blob,
        ACL: 'public-read',
        ContentType: 'audio/webm'
      }

      s3.upload(params, (err, data) => {
        if (err) {
          console.error('Error uploading audio:', err)
        } else {
          console.log('Audio uploaded successfully:', data)
        }
      })
    }
  }
};

I tried this... apparently wavesurfer.js returns a URL in blob format. I then injected it into the upload but the webm file generated doesn't contain the audio stream: it contains the blob's text-format url.

stopRecording() {
      this.isRecording = false
      this.record.stopRecording();

      this.record.on('stopRecording', () => {
        this.uploadAudio(this.record.getRecordedUrl());
      });
    },

I then tried to transform the content into a binary, but I couldn't generate the audio file (it wouldn't play).

stopRecording() {
      this.isRecording = false
      this.record.stopRecording();

      this.record.on('stopRecording', () => {

        var xhr = new XMLHttpRequest();
        xhr.open('GET', this.record.getRecordedUrl(), true);
        xhr.responseType = 'blob';

        xhr.onload = function (e) {
          if (this.status === 200)
          {
            var blob = this.response;
            var reader = new FileReader();

            reader.onloadend = function () {
              var fileData = reader.result;
              this.uploadAudio(fileData); // Not Working
            };
            
            reader.readAsBinaryString(blob);
          }
        };

        xhr.send();
      });

    }

I also tried the function below. I wasn't able to test it properly because I couldn't find a way to access the video buffer to generate a wave file. I think I've tried everything:

console.log(this.wavesurfer.getDecodedData());
      console.log(this.wavesurfer.backend.buffer);
      console.log(this.record.backend.buffer);
      ...

bufferToWave(abuffer, offset, len) {
      var numOfChan = abuffer.numberOfChannels,
          length = len * numOfChan * 2 + 44,
          buffer = new ArrayBuffer(length),
          view = new DataView(buffer),
          channels = [], i, sample,
          pos = 0;

      // write WAVE header
      setUint32(0x46464952);                         // "RIFF"
      setUint32(length - 8);                         // file length - 8
      setUint32(0x45564157);                         // "WAVE"

      setUint32(0x20746d66);                         // "fmt " chunk
      setUint32(16);                                 // length = 16
      setUint16(1);                                  // PCM (uncompressed)
      setUint16(numOfChan);
      setUint32(abuffer.sampleRate);
      setUint32(abuffer.sampleRate * 2 * numOfChan); // avg. bytes/sec
      setUint16(numOfChan * 2);                      // block-align
      setUint16(16);                                 // 16-bit (hardcoded in this demo)

      setUint32(0x61746164);                         // "data" - chunk
      setUint32(length - pos - 4);                   // chunk length

      // write interleaved data
      for(i = 0; i < abuffer.numberOfChannels; i++)
        channels.push(abuffer.getChannelData(i));

      while(pos < length) {
        for(i = 0; i < numOfChan; i++) {             // interleave channels
          sample = Math.max(-1, Math.min(1, channels[i][offset])); // clamp
          sample = (0.5 + sample < 0 ? sample * 32768 : sample * 32767)|0; // scale to 16-bit signed int
          view.setInt16(pos, sample, true);          // update data chunk
          pos += 2;
        }
        offset++                                     // next source sample
      }

      // create Blob
      return new Blob([buffer], {type: "audio/wav"});

      function setUint16(data) {
        view.setUint16(pos, data, true);
        pos += 2;
      }

      function setUint32(data) {
        view.setUint32(pos, data, true);
        pos += 4;
      }
    }

I'd be really happy if someone could help me. I'm new to vuejs: I started last night.

Thanks

[katspaugh]

You should first download the recorded URL and only then upload it to S3. E.g.:

record.on('stopRecording', () => {
  const blobUrl = record.getRecordedUrl()

  fetch(blobUrl)
    .then(response => response.blob())
    .then(blob => {
        // Create params for S3 upload
        const uploadParams = {
            Bucket: 'YOUR_BUCKET_NAME',
            Key: 'your_file_name_here', // replace with your desired file name
            Body: blob,
            ACL: 'public-read' // if you want the file to be readable publicly
        };

        // Call S3 to retrieve upload file to specified bucket
        s3.upload(uploadParams, (err, data) => { ... })
      })
})

[visualight]

You are awesome !