How to convert base64 mp3 coming from backend to playable audio on browser in Javascript/ React?

Question

I am trying to get .mp3 file from backend and displaying playable audio. So backend is converting .mp3 file to base64 and sending me. Tried to send .mp3 directly, but it doesn't work.

I am getting a mp3 converted to base64 from backend like this

axios
        .post(`abcEndPoint`, {
          text: textValue
        })
        .then((res) => {
         
          setAudio(res.data)
          console.log(res.data)
        });

The res.data is as follows

Now I am converting this base64 response to audio tag readable Url with function.

function base64ToImageUrl(base64String) {
  return `data:audio/mpeg;base64,${base64String}`;
}

I have tried to change format to audio/wav, .mp3 , audio/mp3

And lastly, here is my jsx for audio

<>
                  <audio controls>
                    <source src={base64ToImageUrl(audio)} />
                    Your browser does not support the audio element.
                  </audio>
                </>

What is that I'm doing wrong, or is it even doable in react/JavaScript

That's not Base64. Did you mean you **want** to convert it to Base64? — Dave Newton, Feb 14 '23 at 06:32
@DaveNewton according to backend, im getting as base64. Is it not converted properly? — Muhammad Talha, Feb 14 '23 at 06:38
I mean... that's not [Base64](https://en.wikipedia.org/wiki/Base64), obviously--it's a wave file (technically a riff file, but :shrug:) See the header and non-base-64 data? — Dave Newton, Feb 14 '23 at 06:40
(Tangential, but you may or may not want to post the real endpoint since it's accessible.) — Dave Newton, Feb 14 '23 at 06:42
Do you have a solution of how can i display mp3 (not base64) in html using js — Muhammad Talha, Feb 14 '23 at 06:51

arthur simas · Accepted Answer · 2023-02-15T21:08:39.447

1

testing your live endpoint, i can see that you're returning binary data (RIFF audio format), so you're not using base64 (maybe just internally..., idk).

based on that, probably you're trying to play some audio downloaded from your API. check the solution on this answer, but instead of creating an <a> tag, it will be a <source> tag (inside <audio>).

example:

axios
  .post('http://localhost:8080/tts',
    { text: textValue }, // data
    { responseType: 'blob' }, // config options
  )
  .then((response) => {
    // create file link in browser's memory
    const audioObjectUrl = URL.createObjectURL(response.data);
    setAudio(audioObjectUrl);
  });

when you're done using it, remember to revoke with URL.revokeObjectURL(audio);:

React.useEffect(() => {
  // note that the return function of useEffect is the cleanup function
  return () => URL.revokeObjectURL(audio);
}, [])

finally, remove calls to base64ToImageUrl:

<>
  <audio controls>
    <source src={audio} />
    Your browser does not support the audio element.
  </audio>
</>

check the axios docs regarding the request config parameter.
Using the Effect Hook

edited Feb 15 '23 at 21:08

answered Feb 14 '23 at 07:17

arthur simas

132
5

Thanks alot, it works. I might have been missing something before – Muhammad Talha Feb 14 '23 at 07:49
@MuhammadTalha You may want to upvote and/or accept the answer if it solved your issue(s). – Dave Newton Feb 14 '23 at 14:17
@MuhammadTalha please, accept the answer if it solved your problem. it helps to build a better community :) – arthur simas Feb 14 '23 at 18:42
@arthursimas accepted, but can you please edit the live endpoint to dummy text. Thanks – Muhammad Talha Feb 15 '23 at 07:34

How to convert base64 mp3 coming from backend to playable audio on browser in Javascript/ React?

1 Answers1