在Snack中的文字转语音示例

文字转语音是一个重要的领域，其中书面语言文本被转换成语音形式。要使用文字转语音功能，可以使用expo-speech库。本文介绍了React Native和JavaScript代码两个不同的示例，其中第一个示例展示了文字转语音转换的同时显示音调和速度的变化以及原始转换。在第二个示例中，演示了暂停、恢复和停止方法，用户还可以在转换时输入文本。

步骤-1

步骤1 − 从’react-native’导入Text、View、StyleSheet和Button; 还需要从”expo-speech”导入Speech模块。

步骤2 − 创建App.js并编写代码。

步骤3 − 指定要转换的文本。

步骤4 − 编写单独的函数，使用不同的速率和音调值来使用Speech.speak()方法。使用按钮的onPress()调用这些函数。

步骤5 − 按下按钮并检查结果。

示例1：使用expo-speech在Snack中显示音调和速度变化的文字转语音示例

该项目中使用的重要文件是

App.js

App.js：这是该项目的主要JavaScript文件。

示例

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",
   },
});

输出

结果可以在线上看到。当用户输入代码时，默认选择Web视图，并且结果会立即显示出来。

在Snack中的文字转语音示例

步骤-2

步骤1−从’react-native’导入Text、View、StyleSheet、TextInput、Button；还要从”expo-speech”导入Speech模块。

步骤2−创建App.js并编写代码。

步骤3−通过TextInput指定要转换的文本。

步骤4−编写使用Speech.pause()、Speech.resume()和Speech.stop()方法的单独函数。使用单独按钮的onPress()调用这些函数。

步骤5−按下按钮并检查结果。

实例2：在Snack中使用expo-speech显示暂停、恢复和停止方法的文本转语音

项目中使用的重要文件是

App.js

App.js：这是该项目的主要JavaScript文件。

示例

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,
   },
});