This is an example to show how to do Text to Speech Conversion with Natural Voices in React Native – Text Reader. As the name suggests we are going to see how can you implement a text reader feature in your React Native App. We are going to use the TTS engine to convert our Text into Speech. This is a very popular feature nowadays. If you have observed each and every newspaper or content provider application are implementing Text to Speech conversion feature and getting the attention of their customer too.
For text to speech conversion, we are using a very easy to integrate react-native-tts library which provides a Tts component. Tts component provides the support of different voices and has listeners for each state as the reader started, finished, canceled.
To get Different Voices
1 2 3 4 5 6 | const voices = await Tts.voices(); const availableVoices = voices .filter(v => !v.networkConnectionRequired && !v.notInstalled) .map(v => { return { id: v.id, name: v.name, language: v.language }; }); |
Add different Listeners
1 2 3 4 5 6 7 8 9 | Tts.addEventListener('tts-start', event => this.setState({ ttsStatus: 'started' }) ); Tts.addEventListener('tts-finish', event => this.setState({ ttsStatus: 'finished' }) ); Tts.addEventListener('tts-cancel', event => this.setState({ ttsStatus: 'cancelled' }) ); |
In this example, we are going to make a screen with 2 sliders to control the speed and pitch of the voice. We will have a TextInput to get the text to read and a button to start reading. We will also have a list of different voices and languages below which will help us to try different combinations.
Now let’s get started with the example and see how to convert text to speech.
To Make a React Native App
Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cliRun the following commands to create a new React Native project
react-native init ProjectNameIf you want to start a new project with a specific React Native version, you can use the --version argument:
react-native init ProjectName --version X.XX.Xreact-native init ProjectName --version react-native@nextThis will make a project structure with an index file named App.js in your project directory.
Installation of Dependency
To use Tts component we have to install react-native-tts dependency. To install the dependency open the terminal and jump into your project
1 | cd ProjectName |
Now install the dependency
1 | npm install react-native-tts --save |
For this example, we are using Slider component provided by react-native-community to control the pitch and speed of voice so we will also have to install the following dependency for the same
1 | npm install @react-native-community/slider --save |
CocoaPods Installation
After the updation of React Native 0.60, they have introduced autolinking so we do not require to link the libraries but need to install pods. In this example, we need to install the pods for react-native-tts and Slider.
Please use the following command to install CocoaPods
1 | cd ios && pod install && cd .. |
Code to Convert Text to Speech
Now Open App.js in any code editor and replace the code with the following code.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 | //Example of Text to Speech conversion import React, { Component } from 'react'; //Import React import { Platform, StyleSheet, Text, View, Button, FlatList, TextInput, Keyboard, TouchableOpacity, } from 'react-native'; //Import basic component from React Native import Slider from '@react-native-community/slider'; //Import slider for the tuning of pitch and speed import Tts from 'react-native-tts'; //Import library for Text to Speech export default class App extends Component { state = { voices: [], ttsStatus: 'initiliazing', selectedVoice: null, speechRate: 0.5, speechPitch: 1, text: 'Enter Text like Hello About React', }; constructor(props) { super(props); Tts.addEventListener('tts-start', event => this.setState({ ttsStatus: 'started' }) ); Tts.addEventListener('tts-finish', event => this.setState({ ttsStatus: 'finished' }) ); Tts.addEventListener('tts-cancel', event => this.setState({ ttsStatus: 'cancelled' }) ); Tts.setDefaultRate(this.state.speechRate); Tts.setDefaultPitch(this.state.speechPitch); Tts.getInitStatus().then(this.initTts); } initTts = async () => { const voices = await Tts.voices(); const availableVoices = voices .filter(v => !v.networkConnectionRequired && !v.notInstalled) .map(v => { return { id: v.id, name: v.name, language: v.language }; }); let selectedVoice = null; if (voices && voices.length > 0) { selectedVoice = voices[0].id; try { await Tts.setDefaultLanguage(voices[0].language); } catch (err) { //Samsung S9 has always this error: "Language is not supported" console.log(`setDefaultLanguage error `, err); } await Tts.setDefaultVoice(voices[0].id); this.setState({ voices: availableVoices, selectedVoice, ttsStatus: 'initialized', }); } else { this.setState({ ttsStatus: 'initialized' }); } }; readText = async () => { Tts.stop(); Tts.speak(this.state.text); }; setSpeechRate = async rate => { await Tts.setDefaultRate(rate); this.setState({ speechRate: rate }); }; setSpeechPitch = async rate => { await Tts.setDefaultPitch(rate); this.setState({ speechPitch: rate }); }; onVoicePress = async voice => { try { await Tts.setDefaultLanguage(voice.language); } catch (err) { // My Samsung S9 has always this error: "Language is not supported" console.log(`setDefaultLanguage error `, err); } await Tts.setDefaultVoice(voice.id); this.setState({ selectedVoice: voice.id }); }; renderVoiceItem = ({ item }) => { return ( <Button title={`${item.language} - ${item.name || item.id}`} color={this.state.selectedVoice === item.id ? undefined : '#969696'} onPress={() => this.onVoicePress(item)} /> ); }; render() { return ( <View style={styles.container}> <Text style={styles.title}> Example of Text to Speech Conversion in React Native </Text> <View style={styles.sliderContainer}> <Text style={styles.sliderLabel}> {`Speed: ${this.state.speechRate.toFixed(2)}`} </Text> <Slider style={styles.slider} minimumValue={0.01} maximumValue={0.99} value={this.state.speechRate} onSlidingComplete={this.setSpeechRate} /> </View> <View style={styles.sliderContainer}> <Text style={styles.sliderLabel}> {`Pitch: ${this.state.speechPitch.toFixed(2)}`} </Text> <Slider style={styles.slider} minimumValue={0.5} maximumValue={2} value={this.state.speechPitch} onSlidingComplete={this.setSpeechPitch} /> </View> <Text style={styles.sliderContainer}> {`Selected Voice: ${this.state.selectedVoice || ''}`} </Text> <TextInput style={styles.textInput} onChangeText={text => this.setState({ text })} value={this.state.text} onSubmitEditing={Keyboard.dismiss} /> <TouchableOpacity style={styles.button} onPress={this.readText}> <Text> Click to Read Text ({`Status: ${this.state.ttsStatus || ''}`}) </Text> </TouchableOpacity> <Text style={styles.sliderLabel}>Select the Voice from below</Text> <FlatList style={{ width: '100%', marginTop: 5 }} keyExtractor={item => item.id} renderItem={this.renderVoiceItem} extraData={this.state.selectedVoice} data={this.state.voices} /> </View> ); } } const styles = StyleSheet.create({ container: { padding: 16, flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { alignItems: 'center', backgroundColor: '#DDDDDD', padding: 10, width: 300, margin: 10, }, title: { fontSize: 20, textAlign: 'center', margin: 10, }, sliderContainer: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 300, padding: 5, }, sliderLabel: { textAlign: 'center', marginRight: 20, }, slider: { flex: 1, }, textInput: { borderColor: 'gray', borderWidth: 1, color: 'black', width: 300, textAlign: 'center', height: 40, }, }); |
To Run the React Native App
Open the terminal again and jump into your project using.cd ProjectNamereact-native run-androidreact-native run-ios (macOS only).
This was text to speech conversion with natural voices in React Native. If you have any doubts or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!
Hope you liked it. 🙂