Saving audio from the browser to the backend (Django)

Question

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

You may want to check out github.com/areski/django-audiofield as I believe it will likely suit your usecase. — Rafael Kennedy
– Rafael Kennedy, Commented Apr 15, 2017 at 15:40
I want to record audio which is done in the browser and then send that audio to my backend so that I can save that audio file @guest271314 — indexOutOfBounds
– indexOutOfBounds, Commented Apr 15, 2017 at 15:51
@indexOutOfBounds Yes, what issues are you having achieving requirement? Can you include html, javascript that you have tried at Question? See stackoverflow.com/help/how-to-ask, stackoverflow.com/help/mcve. There does not appear to be an actual question presented at OP? — guest271314
– guest271314, Commented Apr 15, 2017 at 15:52
You can post the resulting Blob : let blob = new Blob(chunks, {type: media.type }) at makeLink function to server, or pass blob to FormData instance and post FormData object to server using XMLHttpRequest() or fetch() — guest271314
– guest271314, Commented Apr 15, 2017 at 16:30

guest271314 · Accepted Answer · 2017-04-15 16:36:48Z

2

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));
}

answered Apr 15, 2017 at 16:36

guest271314

1

Sign up to request clarification or add additional context in comments.

3 Comments

indexOutOfBounds Over a year ago

I am developing locally and working in python with the Django framework so what exactly would be my path to server?

guest271314 Over a year ago

"I am developing locally" , "so what exactly would be my path to server?" The path to the python file at the local server you are developing at?

signal Over a year ago

No, the path would be something like "127.0.0.1:8000/formposturl", where formposturl is defined in one of your urls.py file and points to a form view that can process the posted data. This is fairly basic stuff, read the Django docs on forms.

keramat · Accepted Answer · 2020-12-28 05:59:08Z

-1

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')

edited Dec 28, 2020 at 5:59

answered Dec 28, 2020 at 5:57

keramat

4,6038 gold badges29 silver badges42 bronze badges

Collectives™ on Stack Overflow

Saving audio from the browser to the backend (Django)

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related