I've played around with the and I can get speech to text working using the Google API and browser audio recording. I'm wondering if the config object might have been the cause of the issues you encountered.
The components I've used are a Node.js Server: server.js and a simple client (index.html and client-app.js). All in the same folder.
I'm using the Google Speech to Text Client Library for this, so you'll need to add a Google API key file (APIKey.json) to provide credentials.
If you run the Node server, then point your browser to http://localhost:3000/, that should allow you to test the code.
I've drawn a lot of the client-side code from here, using Matt Diamond's Recorder.js code too.
server.js
const express = require('express');
const multer = require('multer');
const fs = require('fs');
const upload = multer();
const app = express();
const port = 3000;
app.use(express.static('./'));
async function testGoogleTextToSpeech(audioBuffer) {
const speech = require('@google-cloud/speech');
const client = new speech.SpeechClient( { keyFilename: "APIKey.json"});
const audio = {
content: audioBuffer.toString('base64'),
};
const config = {
languageCode: 'en-US',
};
const request = {
audio: audio,
config: config,
};
const [response] = await client.recognize(request);
const transcription = response.results
.map(result => result.alternatives[0].transcript)
.join('\n');
return transcription;
}
app.post('/upload_sound', upload.any(), async (req, res) => {
console.log("Getting text transcription..");
let transcription = await testGoogleTextToSpeech(req.files[0].buffer);
console.log("Text transcription: " + transcription);
res.status(200).send(transcription);
});
app.listen(port, () => {
console.log(`Express server listening on port: ${port}...`);
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Speech to text test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/4/cerulean/bootstrap.min.css">
</head>
<body style="padding:50px;">
<h1>Speech to text test</h1>
<div id="controls">
<button id="recordButton">Record</button>
<button id="transcribeButton" disabled>Get transcription</button>
</div>
<div id="output"></div>
<script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
<script src="client-app.js"></script>
</body>
</html>
client-app.js
let rec = null;
let audioStream = null;
const recordButton = document.getElementById("recordButton");
const transcribeButton = document.getElementById("transcribeButton");
recordButton.addEventListener("click", startRecording);
transcribeButton.addEventListener("click", transcribeText);
function startRecording() {
let constraints = { audio: true, video:false }
recordButton.disabled = true;
transcribeButton.disabled = false;
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
const audioContext = new window.AudioContext();
audioStream = stream;
const input = audioContext.createMediaStreamSource(stream);
rec = new Recorder(input, { numChannels:1 })
rec.record()
}).catch(function(err) {
recordButton.disabled = false;
transcribeButton.disabled = true;
});
}
function transcribeText() {
transcribeButton.disabled = true;
recordButton.disabled = false;
rec.stop();
audioStream.getAudioTracks()[0].stop();
rec.exportWAV(uploadSoundData);
}
function uploadSoundData(blob) {
let filename = new Date().toISOString();
let xhr = new XMLHttpRequest();
xhr.onload = function(e) {
if(this.readyState === 4) {
document.getElementById("output").innerHTML = `<br><br><strong>Result: </strong>${e.target.responseText}`
}
};
let formData = new FormData();
formData.append("audio_data", blob, filename);
xhr.open("POST", "/upload_sound", true);
xhr.send(formData);
}