市面上有許多語音助理及語音搜尋的App,究竟是如何在 React Native 上實作的呢?
React Native的語音文本庫。
npm i react-native-voice --save
React Native的文本語音轉換功能。
npm install --save react-native-tts
如何唸出文字
如何唸出文字
import React, { Component } from 'react';
import {
StyleSheet,
Platform,
Image,
TextInput,
StatusBar,
Alert,
AsyncStorage,
Button,
Text,
View,
ScrollView,
TouchableOpacity,
Dimensions,
} from 'react-native';
import Tts from 'react-native-tts';
export default class App extends Component<Props> {
constructor(props) {
super(props);
// Tts.setDefaultVoice('com.apple.ttsbundle.Kyoko-compact');
//{language: "zh-TW", id: "com.apple.ttsbundle.Mei-Jia-compact", quality: 300, name: "Mei-Jia"}
Tts.setDefaultLanguage('zh-TW');
Tts.addEventListener('tts-start', event => console.log('start', event));
Tts.addEventListener('tts-finish', event => console.log('finish', event));
Tts.addEventListener('tts-cancel', event => console.log('cancel', event));
}
_onPressSpeech = () => {
Tts.stop();
Tts.speak('Hello, world!安安你好');
Tts.speak('今天台中市北區 ');
Tts.speak('氣溫32度 局部有雲 ');
Tts.stop();
};
componentDidMount() {
this._onPressSpeech();
}
render() {
return (
<View style={styles.app}>
<View>
<Button title="Press mAe!" onPress={_onPressSpeech} />
<View>
</View>
</View>
)}
</View>
);
}
}
如何辨識語音
如何辨識語音