How to convert a blob file to a specific format?

Question

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'

Zebec

Can you please provide more detail on how you're creating the blob in JS? – Punish

@Punish I used react-voice-recorder for this. – Zebec

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. – Punish

See also: https://mcmap.net/q/844311/-record-audio-stream-from-getusermedia – Punish

@Punish I will take a look at the link. – Zebec

#27159679 – Ambrosine

@Ambrosine I tried the solutions given in the question you give me, but it's the same thing – Zebec

I think it's a problem in the backend part, not the frontend. – Zebec

can you print and post first 128 bytes of your saved file? – Consensus

@okawo I did, see the edit – Zebec

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 – Consensus

also have you tried to open your saved files as a video? – Consensus

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 – Consensus

can u share your code via github in order to save the time spent in reproducing the issue? – Sadick

Answer 1

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

Usage examples:

• Writing wav file in Python with wavfile.write from SciPy
• scipy.io.wavfile.write

Circumspection

Answer 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

Himyarite