[英]How to add Speech-to-Text into a chat application that is written on React Native
My friends and I are working on a project that is a chat application that will implement Speech-To-Text, Text-to-Speech, and Translation APIs of Google.我和我的朋友正在开发一个聊天应用程序,该应用程序将实现 Google 的 Speech-To-Text、Text-to-Speech 和 Translation API。 Gifted Chat and Firebase on the chat application.
聊天应用程序上的天才聊天和 Firebase。 Chat App is working well with Firebase.
聊天应用程序与 Firebase 配合良好。 We added TTS on it and it is also working well but we can't add the STT.
我们在上面添加了 TTS,它也运行良好,但我们无法添加 STT。 We aim that users can use a microphone and the app can convert that speech into text.
我们的目标是用户可以使用麦克风,应用程序可以将语音转换为文本。 This text will automatically appear on the text box of the user.
此文本将自动出现在用户的文本框中。 We believe that we must manually add STT to Gifted Chats modules but we don't know how to do it.
我们认为我们必须手动将 STT 添加到 Gifted Chats 模块,但我们不知道该怎么做。 There is also no source on the Internet about that.
互联网上也没有关于这一点的消息来源。 We will be so happy if anyone can help us.
如果有人可以帮助我们,我们将非常高兴。 Thank you!
谢谢!
You can use react-native-voice library您可以使用react-native-voice库
Here's the example usage:这是示例用法:
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');
}
...
}
Use react-native-voice library for the speech recognition使用 react-native-voice 库进行语音识别
There is a text and onInputTextChanged prop in Gifted Chat that can help you handle the speech result appearing in the text box. 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}
/>
...
)
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.