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 中的暫停、恢復和停止方法，同時允許使用者輸入文字。