CODEWITHSUNDEEP
node.jsreactjsgoogle-text-to-speech
aravinda nawarathna
aravinda nawarathna

Reputation: 120

send google cloud text-to-speech audio file from node server to a react application

I'm having some doubts about sending an audio file to the react frontend of my application from the Nodejs server. I have a few questions,

  1. Do I have to save the mp3 file locally before sending that to the frontend.?
  2. What is the best way to send an audio file to the frontend.? (stream/send as a file/any suggestion)
  3. Are there any services that send back a URL to the converted mp3 file when sending a string.

So far no problem with converting and saving the audio files locally. I want the most convenient option for sending an audio file to the FrontEnd. Thanks in advance.

Upvotes: 1

Views: 977

Answers (1)

Duc Filan
Duc Filan

Reputation: 7157

You don't need to store mp3 file locally in your server because you get the audio stream from your 3rd service. So what you need to do is to pass the stream back to your client (frontend), do something like this (assume that you use express):

import textToSpeech from '@google-cloud/text-to-speech'
import { PassThrough } from 'stream'

const client = new textToSpeech.TextToSpeechClient()

export default class AudioController {
  static async apiGetPronounce(req, res, next) {
    try {
      const request = {
        input: { text: req.query.text },
        voice: { languageCode: req.query.langCode, ssmlGender: 'NEUTRAL' },
        audioConfig: { audioEncoding: 'MP3' },
      }

      res.set({
        'Content-Type': 'audio/mpeg',
        'Transfer-Encoding': 'chunked'
      })

      const [response] = await client.synthesizeSpeech(request)
      const bufferStream = new PassThrough()
      bufferStream.end(Buffer.from(response.audioContent))
      bufferStream.pipe(res)
    } catch (e) {
      console.log(`api, ${e}`)
      res.status(500).json({ error: e })
    }
  }
}

Upvotes: 2

Related Questions