6

I am building a web application with ReactJS and Django framework.

In this web application, there is a part where I record an audio file and send it to the backend to save it.

This is the blob data from ReactJS that I send:

Blob {
size: 29535, 
type: "audio/wav; codecs=0"
}

And this is the code I am using in the backend:

@api_view(['POST'])
@csrf_exempt
def AudioModel(request):
    try:
        audio = request.FILES.get('audio')
    except KeyError:
        return Response({'audio': ['no audio ?']}, status=HTTP_400_BAD_REQUEST)

    destination = open('audio_name.wav', 'wb')
    for chunk in audio.chunks():
        destination.write(chunk)
    destination.close()  # closing the file

    return Response("Done!", status=HTTP_200_OK)

When I play the file I saved, it plays some sound but it crashes when it achieves the end.

This problem makes me look for some information about the file I saved (extension,...).

For this reason I used fleep library:

import fleep

with open("audio_name.wav", "rb") as file:
    info = fleep.get(file.read(128))

print(info.type)
print(info.extension)
print(info.mime)

OUTPUT:

['video']
['webm']
['video/webm']

But getting video in output!

  • Am I doing something wrong?
  • How can I fix this issue?
  • Is there anything I can use to save my file in the desired format?

Any help is appreciated.

EDIT:

Output of first 128 bytes of the saved file:

b'\x1aE\xdf\xa3\x9fB\x86\x81\x01B\xf7\x81\x01B\xf2\x81\x04B\xf3\x81\x08B\x82\x84webmB\x87\x81\x04B\x85\x81\x02\x18S\x80g\x01\xff\xff\xff\xff\xff\xff\xff\x15I\xa9f\x99*\xd7\xb1\x83\x0fB@M\x80\x86ChromeWA\x86Chrome\x16T\xaek\xbf\xae\xbd\xd7\x81\x01s\xc5\x87\xbd\x8d\xc0\xd5\xc6\xaf\xd0\x83\x81\x02\x86\x86A_OPUSc\xa2\x93OpusHead\x01\x01\x00\x00\x80\xbb\x00\x00'
Youness Saadna
  • 792
  • 2
  • 8
  • 25
  • 1
    Can you please provide more detail on how you're creating the blob in JS? – kerasbaz Aug 22 '20 at 02:53
  • @kerasbaz I used `react-voice-recorder` for this. – Youness Saadna Aug 22 '20 at 07:27
  • I would give the react library there a closer look and see if you can set any parameters on the output/export format. One place to start would be to remove django from the equation entirely and work just in JS for now -- make the output from react-voice-recorder downloadable directly from the webpage via JS and see if it plays properly (I suspect it will not). It looks like that library is just calling getUserMedia(), but I don't see any stream export or conversion anywhere so you would be left with whatever the getUserMedia API gives you. – kerasbaz Aug 22 '20 at 07:41
  • See also: https://stackoverflow.com/a/19238153/11386706 – kerasbaz Aug 22 '20 at 07:42
  • @kerasbaz I will take a look at the link. – Youness Saadna Aug 22 '20 at 07:59
  • https://stackoverflow.com/questions/27159179/how-to-convert-blob-to-file-in-javascript – Hiderr Aug 23 '20 at 17:10
  • @Hiderr I tried the solutions given in the question you give me, but it's the same thing – Youness Saadna Aug 23 '20 at 18:55
  • I think it's a problem in the backend part, not the frontend. – Youness Saadna Aug 23 '20 at 18:57
  • can you print and post first 128 bytes of your saved file? – Oleg Vorobiov Aug 27 '20 at 19:17
  • @okawo I did, see the edit – Youness Saadna Aug 27 '20 at 20:06
  • yup thats not a wav file(here is how my wav files look like `b'RIFF:\x10x00WAVEfmt \x10\x00\x00\x00\x01\x00\x02\x00@\x1f\x00\x00\x00}\x00\x00\x04\x00x10x00data4_\x1 ...`), fleep described your file correctly, and my guess is that python wrote your file correctly too(since you wrote the binary directly), so my guess is that you got the data in the wrong format. to double check print out the first chunk before you write it – Oleg Vorobiov Aug 27 '20 at 20:24
  • also have you tried to open your saved files as a video? – Oleg Vorobiov Aug 27 '20 at 20:26
  • i've looked into the source of `react-voice-recorder` a little, in their save method in their code comments they say that it first converts chunks into blob, then makes a video url from that blob, then `// append videoURL to list of saved videos for rendering` – Oleg Vorobiov Aug 27 '20 at 21:44
  • can u share your code via github in order to save the time spent in reproducing the issue? – Gourav Saini Aug 28 '20 at 02:50

2 Answers2

0

Use SciPy to read data from and write data to a variety of file formats.

Usage examples:

Benny
  • 2,233
  • 1
  • 22
  • 27
-2

Looks like inside react-voice-recorder uses MediaRecorder object with default options. But in options you can set correct mimeType, for example audio/webm; codecs=opus

Anton Perepelitcyn
  • 505
  • 4
  • 6