0

I am building a react application that uses text to speech.

Here I am using Azure text to speech. The API seems to be running fine, and I get a binary file in response. While using thunder client in VS code, it gives me an option to save the file in device.

Now while doing it through React, I am trying to convert it to a blob object and create and update the URL for the Audio.

const audioBlob = new Blob([data], { type: 'audio/mpeg' });

setAudioUrl(URL.createObjectURL(audioBlob));

{audioUrl && <audio src={audioUrl} controls />}

On doing this the audio component appears but it is not playable.
Upon inspecting I found out, the source is:

src="blob:http://localhost:3000/b76837b3-6b7a-420e-a618-e29295082819"

Not sure what is wrong here.
Could anyone please help.

Thanks.

I have explained above.

Rajesh Dai
  • 1
  • _"It gives me an option to save the file"_ please provide a link to (an example of) such file then we can test **createObjectURL** for you and work out a possible solution. Also things you can check yourself... **(1)** If you save the file as `test.mp3` in VS Code, does the MP3 file play in an audio tag? **(2)** Are you sure that Azure is outputting an MP3 data (_eg:_ Did you select that option in your settings)? – VC.One Jan 31 '23 at 11:48
  • Can you check the format of the data being passed in the Blob Constructor by logging? – Ram Mar 27 '23 at 03:35

0 Answers0