110 lines
2.7 KiB
JavaScript
110 lines
2.7 KiB
JavaScript
// VoiceHandler.js
|
|
import React, { Component } from 'react';
|
|
import { View, Text, Button } from 'react-native';
|
|
import Voice from '@react-native-voice/voice';
|
|
import Config from 'react-native-config';
|
|
|
|
class VoiceHandler extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
recognized: '',
|
|
started: '',
|
|
results: [],
|
|
isRecording: false,
|
|
};
|
|
|
|
Voice.onSpeechStart = this.onSpeechStart.bind(this);
|
|
Voice.onSpeechRecognized = this.onSpeechRecognized.bind(this);
|
|
Voice.onSpeechResults = this.onSpeechResults.bind(this);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
Voice.destroy().then(Voice.removeAllListeners);
|
|
}
|
|
|
|
onSpeechStart(e) {
|
|
this.setState({
|
|
started: '√',
|
|
});
|
|
}
|
|
|
|
onSpeechRecognized(e) {
|
|
this.setState({
|
|
recognized: '√',
|
|
});
|
|
}
|
|
|
|
onSpeechResults(e) {
|
|
this.setState({
|
|
results: e.value,
|
|
});
|
|
}
|
|
|
|
async _startRecognizing(e) {
|
|
this.setState({
|
|
recognized: '',
|
|
started: '',
|
|
results: [],
|
|
isRecording: true,
|
|
});
|
|
|
|
try {
|
|
await Voice.start('en-US'); // Start the voice recognition
|
|
} catch (error) {
|
|
console.error('There was an error starting voice recognition:', error);
|
|
this.setState({
|
|
isRecording: false,
|
|
});
|
|
}
|
|
}
|
|
async _stopRecognizing() {
|
|
try {
|
|
await Voice.stop();
|
|
this.setState({
|
|
isRecording: false,
|
|
});
|
|
// Assuming you have the audio data, send it to your backend
|
|
this._sendAudioToBackend(this.state.results);
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
_sendAudioToBackend(results) {
|
|
// Placeholder: Convert `results` or actual audio data to a format acceptable by your backend
|
|
const formData = new FormData();
|
|
// formData.append('audio', {uri: 'path_to_audio_file', type: 'audio/x-m4a', name: 'audio.m4a'});
|
|
|
|
fetch(process.env.TTS_BACKEND_URL, {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'Content-Type': 'multipart/form-data',
|
|
},
|
|
})
|
|
.then(response => response.text())
|
|
.then(body => {
|
|
console.log('Audio sent to backend, response:', body);
|
|
})
|
|
.catch(error => {
|
|
console.error('Failed to send audio:', error);
|
|
});
|
|
}
|
|
render() {
|
|
return (
|
|
<View>
|
|
<Text>Press the button and start speaking.</Text>
|
|
<Button
|
|
onPress={() => this.state.isRecording ? this._stopRecognizing() : this._startRecognizing()}
|
|
title={this.state.isRecording ? "Stop Recognizing" : "Start Recognizing"}
|
|
/>
|
|
<Text>Recognized: {this.state.recognized}</Text>
|
|
<Text>Started: {this.state.started}</Text>
|
|
<Text>Results: {this.state.results.join(' ')}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default VoiceHandler;
|