Theo's Typesafe Cult•2y ago

How to upload blob from audio recorder?

I've spent all day banging my head on my keyboard trying to upload an audio file to S3/B2 that was recorded from my React app. Then I remembered to try UploadThing. But I've hit another brick wall. How do I upload a blob with UploadThing? I tried startUpload([blob]) but it tells me, "Type 'Blob' is missing the following properties from type 'File': lastModified, webkitRelativePath." (The audio blob comes from https://www.npmjs.com/package/react-audio-voice-recorder.) My brain is mush now, so can you help me? Thanks in advance!

3 Replies

bakdaddy•2y ago

I don't use uploadThing yet, but my guess would be something like

const file = new File([blob], 'audio', {lastModified: Date.now(), type: 'audio/mp3'});
startUpload(file)

const file = new File([blob], 'audio', {lastModified: Date.now(), type: 'audio/mp3'});
startUpload(file)

Daniel J. LewisOP•2y ago

Well, it seems my problem isn't actually with S3 or UploadThing, it's that I can't seem to convert my blob into any other format that still yields a usable file. For example:

    console.log("Raw", blob);
    const blobText = await blob.text();
    const blobBlob = new Blob([blobText], {
      type: "audio/webm;codecs=opus",
    });
    console.log("Converted", blobBlob);

    console.log("Raw", blob);
    const blobText = await blob.text();
    const blobBlob = new Blob([blobText], {
      type: "audio/webm;codecs=opus",
    });
    console.log("Converted", blobBlob);

Returns:

Raw Blob {size: 41785, type: 'audio/webm;codecs=opus'}
Converted Blob {size: 75160, type: 'audio/webm;codecs=opus'}

Raw Blob {size: 41785, type: 'audio/webm;codecs=opus'}
Converted Blob {size: 75160, type: 'audio/webm;codecs=opus'}

I would expect the converted blob to be the same size as the original blob. I've tried some kind of base64 string, too. While that's smaller than 74 KB (like in the above example), it's still about 25% bigger and still produces an unusable blob.

bakdaddy•2y ago

I don't think you should use

blob.text()

blob.text()

as it does return text, but you are dealing in audio. Maybe try

blob.stream()

blob.stream()

Gaming

Programming

How to upload blob from audio recorder?