Cloud API vs. Native Device Text-to-Speech

Both @google-cloud/text-to-speech and react-native-tts enable JavaScript applications to convert text into spoken audio, but they operate in fundamentally different environments. One relies on powerful cloud servers to generate audio files, while the other uses the built-in speech engine of the user's mobile device. Let's compare how they handle initialization, speech execution, voice selection, and audio output.

🔐 Initialization & Authentication

@google-cloud/text-to-speech requires secure credentials to access Google Cloud services.

• You must set up a service account and download a JSON key file.
• The client initializes with this key to authenticate every request.

// @google-cloud/text-to-speech: Server-side init
const textToSpeech = require('@google-cloud/text-to-speech');
const client = new textToSpeech.TextToSpeechClient({
  keyFilename: './service-account-key.json'
});

react-native-tts requires no authentication or external keys.

• You simply import the module in your React Native component.
• It connects directly to the device OS without setup.

// react-native-tts: Client-side init
import Tts from 'react-native-tts';

// No credentials needed
// Ready to use immediately after import

🗣️ Speaking Text

@google-cloud/text-to-speech sends text to the cloud and receives audio data back.

• You build a request object with input text and configuration.
• The response contains audio content as a buffer or base64 string.

// @google-cloud/text-to-speech: Synthesize request
const request = {
  input: { text: 'Hello world' },
  voice: { languageCode: 'en-US', ssmlGender: 'NEUTRAL' },
  audioConfig: { audioEncoding: 'MP3' }
};

const [response] = await client.synthesizeSpeech(request);
const audioContent = response.audioContent;

react-native-tts commands the device to speak immediately.

• You call the speak function with a string.
• The device plays audio directly through speakers without saving files.

// react-native-tts: Speak command
Tts.speak('Hello world');

// Optional: Handle finish event
Tts.addListener('tts-finish', () => {
  console.log('Speech completed');
});

🎛️ Voice Selection & Control

@google-cloud/text-to-speech offers hundreds of specific cloud voices.

• You select voices by language code and gender or specific name.
• Supports WaveNet and Neural2 voices for higher quality.

// @google-cloud/text-to-speech: Specific voice
const request = {
  input: { text: 'Premium voice' },
  voice: { 
    languageCode: 'en-US', 
    name: 'en-US-Neural2-F' 
  },
  audioConfig: { audioEncoding: 'MP3' }
};

react-native-tts uses whatever voices the device OS provides.

• You can set language and pitch, but voice names vary by device.
• Limited to what the user has installed on their phone.

// react-native-tts: Set language and rate
Tts.setDefaultLanguage('en-US');
Tts.setDefaultRate(0.5); // Slow
Tts.setDefaultPitch(1.0); // Normal

// Get available voices (varies by OS)
Tts.getInit().then(() => {
  Tts.voiceChange('com.apple.voice.compact.en-US.Samantha');
});

📦 Audio Output Handling

@google-cloud/text-to-speech returns raw audio data for you to manage.

• You receive a buffer that you can save to disk or stream.
• Gives full control over file storage and playback timing.

// @google-cloud/text-to-speech: Save to file
const fs = require('fs');
fs.writeFileSync('output.mp3', audioContent, 'binary');
console.log('Audio saved to output.mp3');

react-native-tts streams audio directly to the device speaker.

• No file is created unless you record the output externally.
• Playback happens instantly as part of the UI thread.

// react-native-tts: Direct playback
// No file handling needed
Tts.speak('Instant playback');

// Stop if needed
Tts.stop();

🌐 Offline Capability

@google-cloud/text-to-speech requires an active internet connection.

• Every request goes to Google servers over HTTPS.
• Fails if the network is unavailable or slow.

// @google-cloud/text-to-speech: Network dependent
try {
  const [response] = await client.synthesizeSpeech(request);
} catch (error) {
  // Fails without internet
  console.error('Network error:', error);
}

react-native-tts works entirely offline after initial app install.

• Uses the device's built-in synthesis engine.
• Ideal for apps used in areas with poor connectivity.

// react-native-tts: Offline ready
// Works without internet
Tts.speak('Works offline');

// Check if engine is ready
Tts.getInit().then(() => {
  // Ready to speak
});

📊 Summary: Key Differences

💡 The Big Picture

@google-cloud/text-to-speech is like a professional recording studio 🎧 — you get top-tier quality and consistency, but you pay for the service and need a connection to use it. Best for generating podcasts, audiobooks, or customer service bots where voice quality matters most.

react-native-tts is like a built-in megaphone 📣 — it is free, always available, and instant, but the voice quality depends on the user's device. Best for mobile apps needing accessibility features, notifications, or simple read-aloud functions without backend complexity.

Final Thought: Your choice depends on where the speech happens. If you need server-generated audio files with human-like quality, choose the cloud client. If you need instant, offline speech inside a mobile app, choose the native module.