如何将 Speech-to-Text 添加到使用 React Native 编写的聊天应用程序中

Question

我和我的朋友正在开发一个聊天应用程序，该应用程序将实现 Google 的 Speech-To-Text、Text-to-Speech 和 Translation API。 聊天应用程序上的天才聊天和 Firebase。 聊天应用程序与 Firebase 配合良好。 我们在上面添加了 TTS，它也运行良好，但我们无法添加 STT。 我们的目标是用户可以使用麦克风，应用程序可以将语音转换为文本。 此文本将自动出现在用户的文本框中。 我们认为我们必须手动将 STT 添加到 Gifted Chats 模块，但我们不知道该怎么做。 互联网上也没有关于这一点的消息来源。 如果有人可以帮助我们，我们将非常高兴。 谢谢！

Answer 1

您可以使用react-native-voice库

这是示例用法：

import Voice from '@react-native-community/voice';
import React, {Component} from 'react';

class VoiceTest extends Component {
  constructor(props) {
    Voice.onSpeechStart = this.onSpeechStartHandler.bind(this);
    Voice.onSpeechEnd = this.onSpeechEndHandler.bind(this);
    Voice.onSpeechResults = this.onSpeechResultsHandler.bind(this);
  }
  onStartButtonPress(e){
    Voice.start('en-US');
  }
  ...
}

Answer 2

使用 react-native-voice 库进行语音识别

Gifted Chat 中有一个 text 和 onInputTextChanged 属性，可以帮助你处理文本框中出现的语音结果。

import Voice from '@react-native-community/voice';
import React, { useState, useEffect } from 'react';
import { GiftedChat, Composer } from 'react-native-gifted-chat';

const VoiceTest = () => {
  const [speech, setSpeech] = useState('');

  useEffect(() => {
    Voice.onSpeechStart = onSpeechStart;
    Voice.onSpeechEnd = onSpeechEnd;
    Voice.onSpeechError = onSpeechError;
    Voice.onSpeechResults = onSpeechResults;
    Voice.onSpeechPartialResults = onSpeechPartialResults;
  
  return () => Voice.destroy().then(Voice.removeAllListeners)
}, [])

  const onSpeechStart = () => {
  ...
  }

  const onSpeechEnd = () => {
  ...
  }

  const onSpeechError = () => {
  ...
  }

  const onSpeechResults = (e) => {
  ...
  setSpeech(e.value[0])
  }

  const onSpeechPartialResults = (e) => {
  ...
  setSpeech(e.value[0])
  }

  const startListening = () => {
  ...
  // You can set the locale to any language you want it to recognize, I am using Nigerian English.
  Voice.start('en-NG')
  }

  const renderComposer = (props) => {
  // Adds a Mic Button in the text box, you can style it as you want
  return (
    <View style={{ flexDirection: 'row' }}>
     <Composer {...props} />
     <MicrophoneButton onPress={startListening} />
    </View>
   )
  }

  return (
    ...
    <GiftedChat 
      renderComposer={renderComposer}
      text={speech}
      onInputTextChanged={setSpeech} 
     />
    ...
  )
 ...