iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
0
Mobile Development

小孩子才做選擇 ! Flutter & React Native 我全都要系列 第 25

[Day25] react-native-Voice in 爵士音樂節!?

市面上有許多語音助理及語音搜尋的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>
    );
  }
}



如何辨識語音

如何辨識語音


上一篇
[Day24] react-native-高美濕地!?
下一篇
[Day26] 與後端API串接資料
系列文
小孩子才做選擇 ! Flutter & React Native 我全都要32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言