Google Speech-To-Text with React - node.js

Question

I'm working on a simple speech to text web app, I already have working server-side nodejs code and simple react page, but I don't have any idea how to glue them together, I was trying to implement various different weird stuff and either the react app doesn't get any data in return either there is error 500.
I would like to implement stop() function for the recorder after getting the transcription from Google as it is set to be listening only short commands, but the only solution that I could implement was the setTimeout function which is not exactly what I wanted.
EDIT: I have solved the problem with stopping recorder after getting the command and it works pretty good, however, any improvements are welcome. The solution was quite easy, I just modified the threshold from null to 0.5, thresholdEnd: 0.5. Still not resolved the front end for this express app.
EDIT 2: Funny thing, I accidentally discover this stuff and it is exactly what I wanted... So much effort just to find this amazing and super easy solution, especially if you follow this medium article.
Can anybody help me, please?
Server-side code:
'use strict';
const express = require('express');
const app = express();
const port = 3002;
const cors = require('cors')
// Node-Record-lpcm16
const recorder = require('node-record-lpcm16');
// Imports the Google Cloud client library
const speech = require('#google-cloud/speech');
function speechFunction() {
const encoding = 'LINEAR16';
const sampleRateHertz = 16000;
const languageCode = 'en-US';
const command_and_search = 'command_and_search';
const keywords = ['turn on', 'turn off', 'turn it on', 'turn it off'];
const request = {
config: {
encoding: encoding,
sampleRateHertz: sampleRateHertz,
languageCode: languageCode,
model: command_and_search,
speech_contexts: keywords
},
singleUtterance: true,
interimResults: false // If you want interim results, set this to true
};
// Creates a client
const client = new speech.SpeechClient();
// Create a recognize stream
const recognizeStream = client
.streamingRecognize(request)
.on('error', console.error)
.on('data', data =>
// process.stdout.write(
console.log(
data.results[0] && data.results[0].alternatives[0]
? `Transcription: ${data.results[0].alternatives[0].transcript}\n`
: `\n\nReached transcription time limit, press Ctrl+C\n`
)
);
// Start recording and send the microphone input to the Speech API
recorder
.record({
sampleRateHertz: sampleRateHertz,
threshold: 0, //silence threshold
recordProgram: 'rec', // Try also "arecord" or "sox"
silence: '5.0', //seconds of silence before ending
endOnSilence: true,
thresholdEnd: 0.5
})
.stream()
.on('error', console.error)
.pipe(recognizeStream);
console.log('Listening, press Ctrl+C to stop.');
// [END micStreamRecognize]
}
app.use(cors());
app.use('/api/speech-to-text/',function(req, res){
speechFunction(function(err, result){
if (err) {
console.log('Error retrieving transcription: ', err);
res.status(500).send('Error 500');
return;
}
res.send(result);
})
});
// app.use('/api/speech-to-text/', function(req, res) {
// res.speechFunction();
// });
// app.get('/speech', (req, res) => res.speechFunction);
app.listen(port, () => {
console.log(`Listening on port: ${port}, at http://localhost:${port}/`);
});
React
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor() {
super()
this.state = {
}
}
onListenClick() {
fetch('http://localhost:3002/api/speech-to-text/')
.then(function(response) {
console.log(response);
this.setState({text: response});
})
.catch(function(error) {
console.log(error);
});
}
render() {
return (
<div className="App">
<button onClick={this.onListenClick.bind(this)}>Start</button>
<div style={{fontSize: '40px'}}>{this.state.text}</div>
</div>
);
}
}
export default App;

Answer 1

Replace onListenClick() code with the following
async onListenClick(){
const response= await axios.get('http://localhost:3002/api/speech-to-text/')
console.log(response)
this.setState(text:response.data)
}
I am trying to figure out how to stop the google api by clicking on a button. But above code will bring data on the react