How to upload a Blob to Azure Blob Storage using Azure Blob Service

Question

I'm writing some code which allows a user to record themselves using their mic and then upload the recording to Azure Blob Storage.

To record the audio I'm using code similar to the below

let recordedBlobs = [];
this.mediaRecorder = new MediaRecorder(window.stream, { mimeType: 'audio/webm' });
this.mediaRecorder.ondataavailable = event => recordedBlobs.push(event.data);
this.mediaRecorder.start(10);

My stop function then creates a Blob and then tries to upload this into Azure

this.mediaRecorder.stop();
const blob = new Blob(recordedBlobs);
const blobService = azure.createBlobServiceWithSas(myFileUri, mysasToken);
const speedSummary = blobService.createBlockBlobFromBrowserFile(container, path, blob, { blockSize });

This all works fine on another page where the user uploads a file, but not for the audio uploaded using the MediaRecorder.

Any ideas where I'm going wrong?

Thanks

Answer 1

createBlockBlobFromBrowserFile expects a File object. What you would need to do is create that using the recorded bits. Try something like the following:

const blob = new Blob(recordedBlobs, {type: 'audio/webm'});
const file = new File([blob], "mytest.webm", {type: 'audio/webm'});
const blobService = azure.createBlobServiceWithSas(myFileUri, mysasToken);
const speedSummary = blobService.createBlockBlobFromBrowserFile(container, path, file, { blockSize });         

I tried the code above and was able to upload the blob.