Text to Speech Examples in Snack

Text to Speech is an important area where the written language text is converted into speech form. For using Text to Speech conversion, functionality from expo-speech can be used. In this article, the React native and javascript code is shown with two different examples, where in the first example while showing the text-to-speech conversion, the pitch and speed change are shown along with the original conversion. In the second example, the pause, resume, and stop methods are demonstrated and the user can also enter the text at the time of conversion.

Algorithm-1

Step 1 − Import Text, View, StyleSheet, and Button from 'react-native'; Also import Speech modules from "expo-speech".

Step 2 − Make the App.js and write the code.

Step 3 − Specify the text that is to be converted.

Step 4 − Write separate functions to use Speech.speak() methods with different values for rate and pitch. Call these functions using the onPress() of buttons.

Step 5 − Press the buttons and check the results.

Example 1: Text To Speech showing the pitch and speed change using expo-speech in Snack.

The important file used in the project is

• App.js

App.js : This is the main javascript file for this project.

Example

import{Component}from'react';
import{Text,View,StyleSheet,Button}from'react-native';
import*asSpeechfrom'expo-speech';
varmyNote='Ihavewrittenthistexttoshowhowcanwewritesomethingandthenchangeittospeech';
exportdefaultclassTextToSpeechNote1extendsComponent{
   speakWhateverIsWritten=()=>{
      Speech.speak(myNote);
   };

   speechRateFast=()=>{
      Speech.speak(myNote,{
         rate:2,
      });
   }

   speechRateSlow=()=>{
      Speech.speak(myNote,{
         rate:0.25,
      });
   }

   speechPitchChange=()=>{
      Speech.speak(myNote,{
         pitch:3,
      });
   }

   render(){
      return(
         <Viewstyle={styles.mainSpace}>
            <Textstyle={styles.TextSty}>{myNote}</Text>
            <Buttontitle="HearNow"color="#474749"onPress={this.speakWhateverIsWritten}/>
            <Buttontitle="PitchChanged"color="#004677"onPress={this.speechPitchChange}/>
            <Buttontitle="SlowSpeech"color="#474749"onPress={this.speechRateSlow}/>
            <Buttontitle="FastSpeech"color="#004677"onPress={this.speechRateFast}/>
         </View>
      );
   }
}
conststyles=StyleSheet.create({
   mainSpace:{
      flex:1,
      justifyContent:'center',
      backgroundColor:'#cc4668',
      padding:8,
   },
   TextSty:{
      color:'white',
      fontWeight:"bold",
      fontSize:20,
      margin:5,
      alignItems:"center",
   },
});

Output

The result can be seen online. As the user types in the code, the Web view is selected by default and the result appears instantly.

img: Text To Speech Conversion showing in the Web view in Snack

Algorithm-2

Step 1 − Import Text, View, StyleSheet, TextInput, Button from 'react-native'; Also import Speech modules from "expo-speech".

Step 2 − Make the App.js and write the code.

Step 3 − Specify the text that is to be converted through a TextInput.

Step 4 − Write separate functions to use Speech.pause(), Speech.resume() and Speech.stop() methods. Call these functions using the onPress() of separate buttons.

Step 5 − Press the buttons and check the results.

Example 2: Text To Speech showing the pause, resume and stop methods using expo-speech in Snack.

The Important file used in the project is

• App.js

App.js : This is the main javascript file for this project.

Example

import{Component}from'react';
import{Text,View,StyleSheet,Button,TextInput}from'react-native';
import*asSpeechfrom'expo-speech';

varstrErr="FirstWriteSomeTextinInputBox";
exportdefaultclassTextToSpeechNote1extendsComponent{
   constructor(){
      super();
      this.state={
         myNote:''
      };
   }

   speakWhateverIsWritten=()=>{
      if(this.state.myNote==''){
         Speech.speak(strErr);
      } else {
         Speech.speak(this.state.myNote);
      }
   };

   speechPauseIt=()=>{
      Speech.pause();
   }
   speechResumeIt=()=>{
      Speech.resume();
   }
   speechStopIt=()=>{
      Speech.stop();
   }
   render(){
      return(
         <Viewstyle={styles.mainSpace}>
            <TextInput
            multiline={true}
            style={styles.inputSty}
            onChangeText={myNote=>{
               this.setState({myNote:myNote});
            }}
            value={this.state.myNote}
            />
            <Textstyle={styles.TextSty}></Text>
            <Buttontitle="HearNow"color="#474749"onPress={this.speakWhateverIsWritten}/>
            <Buttontitle="Pause"color="#004677"onPress={this.speechPauseIt}/>
            <Buttontitle="Resume"color="#474749"onPress={this.speechResumeIt}/>
            <Buttontitle="Stop"color="#004677"onPress={this.speechStopIt}/>
            <Buttontitle="ClearTheInputBox"color="#474749"onPress={myNote=>{
               this.setState({myNote:''});
            }}/>
         </View>
      );
   }
}

conststyles=StyleSheet.create({
   mainSpace:{
      flex:1,
      justifyContent:'center',
      backgroundColor:'#cc4668',
      padding:8,
   },
   TextSty:{
      color:'white',
      fontWeight:"bold",
      fontSize:20,
      margin:5,
      alignItems:"center",
   },
   inputSty:{
      marginTop:5,
      width:'90%',
      alignSelf:'center',
      height:300,
      textAlign:'center',
      borderWidth:3,
      fontSize:24,
   },
});

Output

The result can be seen online. As the user types in the code, the Web view is selected by default and the result appears instantly. Here, the Android simulator is used to show the result.

Showing the result using the Android simulator.

In this article, for Text to Speech conversion, the ways to show different methods from expo-speech are presented on Expo Snack. Firs,t, the methods given for changing Text to Speech form and then increasing or decreasing the rate of speech are shown along with the changing of the pitch. In another example, the pause, resume, and stop methods from Speech are shown while allowing the text to be entered by the user.