React-Native-Voice，如何将新的语音结果与之前的语音识别结果连接起来？

Posted 2023-05-07

【中文标题】React-Native-Voice，如何将新的语音结果与之前的语音识别结果连接起来？

【英文标题】：React-Native-Voice, How to concatenate new speech result with the previous speech recognition result?

【发布时间】：2020-01-07 10:55:50

【问题描述】：

我正在使用 react-native-voice 在 React Native 应用程序中将语音转换为文本，但我无法将之前识别的文本与最新识别的测试连接起来。

每次识别一个新句子时，它都会替换以前识别的文本，我想要实现的是它应该识别并将前一个句子与最新识别的测试连接起来。

这里是代码

react-native-voice 代码

async _startDefectDescriptionRecognition(e) 
    this.setState(
        recognized: '',
        started: '',
    );

    try 
        await Voice.start('en-UK');
     catch (e) 
        console.error(e);
    

onSpeechStart(e) 
    this.setState(
        started: '√',
    );

onSpeechRecognized(e) 
    this.setState(
        recognized: '√',
    );


onSpeechResults(e) 
    this.setState(
        defectDescriptionSpeechResult: e.value,
    );

updateDefectDescription(defectSpeech) 
    this.state.conditionDefectDescription = defectSpeech

渲染代码

this.state.defectDescriptionSpeechResult.map((result, index) => this.updateDefectDescription(result))
<View style= width: '45%', >
    <TextInput
        placeholder="Defect Description"
        ref=input =>  this.defectDescriptionClear = input 
        multiline=true
        onChangeText=(conditionDefectDescription) => this.setState( conditionDefectDescription: conditionDefectDescription )
        style=[styles.TextInputStyle,  height: 90, width: '100%', textAlign: 'center', fontSize: 15 ]>
        this.state.conditionDefectDescription
    </TextInput>   
</View>
<TouchableOpacity style= paddingLeft: '0.5%', paddingRight: '1.5%' 
    onPress=this._startDefectDescriptionRecognition.bind(this)>    
    <Icons name='microphone-outline' style=this.state.demo1 == true ?  fontSize: 50, color: '#f12711'  :  fontSize: 50, color: '#23C3F0'  />
</TouchableOpacity>

输出：识别的新文本正在替换旧文本

预期输出：识别的新文本应该连接旧文本

react-native-voice的完整文档可以在here找到

react-native-voice 的工作示例可以在here找到

【参考方案1】：

这只是在运行时重新绑定侦听器的问题，如下所示：

export class _VoiceRecorder extends React.PureComponent<IInner> 
  private startRecording = async () => 
    const  setIsRecording, t  = this.props;
      try 
        Voice.onSpeechResults = this.onSpeechResultsHandler;
        Voice.onSpeechError = this.onSpeechErrorHandler;
        Voice.onSpeechEnd = this.onSpeechEndHandler;

        // @TODO: Needs to be i18ned
        await Voice.start('de-DE');
        setIsRecording(true);
       catch (e) 
        log.warn('Something went wrong voice recording', e);
      
  ;

  private stopRecording = async (e?: React.SyntheticEvent) => 
    const  setIsRecording  = this.props;
    e?.stopPropagation();

    try 
      await Voice.stop();
      await Voice.cancel();
     catch (e) 
     finally 
      setIsRecording(false);
    
  ;

  private onSpeechResultsHandler = ( value :  value: string[] ) => 
    if (value[0]) 
      this.props.setTempResult(value[0]);
      if (Platform.OS === 'android') 
        this.onSpeechEndHandler();
      
    
  ;

  private onSpeechEndHandler = () => 
    this.props.setIsRecording(false);
    this.props.onChange(this.props.tempResult);
    this.props.setTempResult('');
  ;

  private onSpeechErrorHandler = (e: any) => 
    this.props.setIsRecording(false);
    this.props.setTempResult('');
  ;

  public render() 
// component UI code comes here