indexOutOfBounds
indexOutOfBounds

Reputation: 571

Saving audio from the browser to the backend (Django)

I went through a lot of answers which have already been given but did not understand.

Task : I have to get the audio from the user which should be less than one minute and then save it in the backend and send it to Google's Speech Recognition API to get the text.

I tried recording in the browser using the MediaRecorder API by using this demo over here https://mido22.github.io/MediaRecorder-sample/.

I want to get the recorded audio saved in my Django backend so we can do some post processing on it.

EDIT1: Github code for media recorder api

Upvotes: 4

Views: 3811

Answers (2)

keramat
keramat

Reputation: 4543

I have created a simple project here: https://github.com/Keramatfar/django_sound_file

For the backend, i use the following function:

def main(request):
        
    if request.method == "POST":
        audio_data = request.FILES.get('data')
        path = default_storage.save('file' + '.wav', ContentFile(audio_data.read()))
        return render(request, 'web-recorder.html')
    else:
        return render(request, 'web-recorder.html')

Upvotes: -1

guest271314
guest271314

Reputation: 1

POST the resulting Blob at makeLink function to server as property of a FormData object

function makeLink() {
  let blob = new Blob(chunks, {type: media.type });
  let fd = new FormData;
  fd.append("audioRecording", blob);
  let request = new XMLHttpRequest();
  request.open("POST", "/path/to/server", true);
  request.onload = function() {
    // do stuff
  }
  request.onerror = function() {
   // handle error
  }
  request.send(fd);
}

function makeLink() {
  let blob = new Blob(chunks, {type: media.type });
  let fd = new FormData;
  fd.append("audioRecording", blob);
  fetch("/path/to/server", {method:"POST", body:fd})
  .then(response => response.ok)
  .then(res => console.log(res))
  .catch(err => console.error(err));
}

Upvotes: 2

Related Questions