React Native Text-To-Speech library for Android and iOS

React Native Text-To-Speech library for Android and iOS

react-native-tts .React Native TTS is a text-to-speech library for React Native on iOS and Android.

React Native TTS

React Native TTS is a text-to-speech library for React Native on iOS and Android.

Install

npm install --save react-native-tts
react-native link react-native-tts

Usage

Imports

import Tts from 'react-native-tts';

Speaking

Add utterance to TTS queue and start speaking. Returns promise with utteranceId.

Tts.speak('Hello, world!');

Additionally, speak() allows to pass platform-specific options.

// IOS
Tts.speak('Hello, world!', {
  iosVoiceId: 'com.apple.ttsbundle.Moira-compact',
  rate: 0.5,
});
// Android
Tts.speak('Hello, world!', {
  androidParams: {
    KEY_PARAM_PAN: -1,
    KEY_PARAM_VOLUME: 0.5,
    KEY_PARAM_STREAM: 'STREAM_MUSIC',
  },
});

For more detail on androidParams properties, please take a look at official android documentation. Please note that there are still unsupported key with this wrapper library such as KEY_PARAM_SESSION_ID. The following are brief summarization of currently implemented keys:

  • KEY_PARAM_PAN ranges from -1 to +1.

  • KEY_PARAM_VOLUME ranges from 0 to 1, where 0 means silence. Note that 1 is a default value for Android.

  • For KEY_PARAM_STREAM property, you can currently use one of STREAM_ALARM, STREAM_DTMF, STREAM_MUSIC, STREAM_NOTIFICATION, STREAM_RING, STREAM_SYSTEM, STREAM_VOICE_CALL,

The supported options for IOS are:

  • iosVoiceId which voice to use, check voices() for available values
  • rate which speech rate this line should be spoken with. Will override default rate if set for this utterance.

Stop speaking and flush the TTS queue.

Tts.stop();

Waiting for initialization

On some platforms it could take some time to initialize TTS engine, and Tts.speak() will fail to speak until the engine is ready.

To wait for successfull initialization you could use getInitStatus() call.

Tts.getInitStatus().then(() => {
  Tts.speak('Hello, world!');
});

Ducking

Enable lowering other applications output level while speaking (also referred to as "ducking").

Tts.setDucking(true);

List Voices

Returns list of available voices

(not supported on Android API Level < 21, returns empty list)

Tts.voices().then(voices => console.log(voices));

// Prints:
//
// [ { id: 'com.apple.ttsbundle.Moira-compact', name: 'Moira', language: 'en-IE', quality: 300 },
// ...
// { id: 'com.apple.ttsbundle.Samantha-compact', name: 'Samantha', language: 'en-US' } ]
Voice field Description
id Unique voice identifier (e.g. com.apple.ttsbundle.Moira-compact)
name Name of the voice (iOS only)
language BCP-47 language code (e.g. 'en-US')
quality Voice quality (300 = normal, 500 = enhanced/very high)
latency Expected synthesizer latency (100 = very low, 500 = very high) (Android only)
networkConnectionRequired True when the voice requires an active network connection (Android only)
notInstalled True when the voice may need to download additional data to be fully functional (Android only)

Set default Language

Tts.setDefaultLanguage('en-IE');

Set default Voice

Sets default voice, pass one of the voiceId as reported by a call to Tts.voices()

(not available on Android API Level < 21)

Tts.setDefaultVoice('com.apple.ttsbundle.Moira-compact');

Set default Speech Rate

Sets default speech rate. The rate parameter is a float where where 0.01 is a slowest rate and 0.99 is the fastest rate.

Tts.setDefaultRate(0.6);

There is a significant difference to how the rate value is interpreted by iOS and Android native TTS APIs. To provide unified cross-platform behaviour, translation is applied to the rate value. However, if you want to turn off the translation, you can provide optional skipTransform parameter to Tts.setDefaultRate() to pass rate value unmodified.

Do not translate rate parameter:

Tts.setDefaultRate(0.6, true);

Set default Pitch

Sets default pitch. The pitch parameter is a float where where 1.0 is a normal pitch. On iOS min pitch is 0.5 and max pitch is 2.0

Tts.setDefaultPitch(1.5);

Controls the iOS silent switch behavior

Platforms: iOS

  • "inherit" (default) - Use the default behavior
  • "ignore" - Play audio even if the silent switch is set
  • "obey" - Don't play audio if the silent switch is set
Tts.setIgnoreSilentSwitch("ignore");

Events

Subscribe to TTS events

Tts.addEventListener('tts-start', (event) => console.log("start", event));
Tts.addEventListener('tts-finish', (event) => console.log("finish", event));
Tts.addEventListener('tts-cancel', (event) => console.log("cancel", event));

Support for multiple TTS engines

Platforms: Android

Functions to list available TTS engines and set an engine to use.

Tts.engines().then(engines => console.log(engines));
Tts.setDefaultEngine('engineName');

Install (additional) language data

Shows the Android Activity to install additional language/voice data.

Tts.requestInstallData();

Troubleshooting

No text to speech engine installed on Android

On Android, it may happen that the Text-to-Speech engine is not (yet) installed on the phone. When this is the case, Tts.getInitStatus() returns an error with code no_engine. You can use the following code to request the installation of the default Google Text to Speech App. The app will need to be restarted afterwards before the changes take affect.

Tts.getInitStatus().then(() => {
  // ...
}, (err) => {
  if (err.code === 'no_engine') {
    Tts.requestInstallEngine();
  }
});

Example

There is an example project which shows use of react-native-tts on Android/iOS: https://github.com/themostaza/react-native-tts-example

Download Details:

Author: ak1394

Source Code: https://github.com/ak1394/react-native-tts

react-native react mobile-apps

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.

Which is the best React Native app development company in New York?

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.