CODEWITHSUNDEEP
javascriptweb-audio-apigoogle-text-to-speech
Alexandru Raduca
Alexandru Raduca

Reputation: 33

How to play a base64 response from Google Text to Speech as an mp3 audio in browser using Javascript

I wrote this code to play an audio on a button click but I can't make it work. Google docs aren't helpful on handling the response. Can anyone please help?

async function playVoiceover() {
    const url ='https://texttospeech.googleapis.com/v1/text:synthesize?key=XXXXXXX'
    const rawResponse = await fetch(url, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        'input':{
          'ssml':`<speak>The <say-as interpret-as=\"characters\">SSML</say-as>
               standard <break time=\"1s\"/>is defined by the
               <sub alias=\"World Wide Web Consortium\">W3C</sub>.</speak>`
         },
         'voice':{
           'languageCode':'en-us',
           'name':'en-US-Standard-B',
           'ssmlGender':'MALE'
         },
         'audioConfig':{
           'audioEncoding':'MP3'
         }
      })
    });
    const content = await rawResponse.json();
    const mp3 = 'data:audio/mp3;base64,'+window.atob(content.audioContent)
    const audio = new Audio(mp3);
    audio.play();
  }

Upvotes: 1

Views: 2082

Answers (1)

Betjens
Betjens

Reputation: 1401

I'm leaving this answer as information about this case for the community:

  • window.atob()

    The atob() method decodes a base-64 encoded string.

  • texttospeech.googleapis.com (response structure)

{ "audioContent": string } // A base64-encoded string.

Its not needed to decoded when you are formating the mp3 string with the codec structure. You can see a similar response here.

For additional details about the response from the texttospeech api:

Upvotes: 2

Related Questions