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：使用 Snack 中的 expo-speech 显示音调和语速变化的文字转语音。

项目中使用的重要文件是

• 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 中 Web 视图中显示的文字转语音转换

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

输出

结果可以在线查看。当用户输入代码时，默认情况下会选择 Web 视图，结果会立即显示。此处使用 Android 模拟器来显示结果。

使用 Android 模拟器显示结果。

在本文中，对于文字转语音转换，在 Expo Snack 上展示了如何使用 expo-speech 中的不同方法。首先，展示了用于更改文字转语音形式以及增加或减少语音速率的方法，以及音调的变化。在另一个示例中，展示了 Speech 中的暂停、恢复和停止方法，同时允许用户输入文本。