I am trying to use GCP speech-to-text api . I am newbie in this technology .
The main objective is to convert speech to text . Trying to convert speech to text through plain JavaScript . I am facing badrequest error on api call. can anyone guide me ?
<html>
<head>
<style>
button {margin: 5px; padding: 10px 20px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer;}
button:hover {background-color: #0056b3;}
div { margin-top: 20px;}
</style>
</head>
<body>
<h3> Using the Media recorder API to record the audio in the web browser </h3>
<div>
<button id = "start"> Start Recording </button>
<button id = "stop"> Stop Recording </button>
<button id = "play"> Play Recorded Audio </button>
</div> <br>
<div id = "output"> </div>
<script>
const startButton = document.getElementById('start');
const stopButton = document.getElementById('stop');
const playButton = document.getElementById('play');
let output = document.getElementById('output');
let audioRecorder;
let audioChunks = [];
async function sendAudioToGCP(blob) {
const apiKey = '---';
const url = `https://speech.googleapis.com/v1/speech:recognize?key=${apiKey}`;
const formData = new FormData();
formData.append('audio', blob);
try {
const response = await fetch(url, {
method: 'POST',
body: formData
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
const transcript = data.results[0].alternatives[0].transcript;
return transcript;
} catch (error) {
console.error('Error sending audio to GCP:', error);
return null;
}
}
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
audioRecorder = new MediaRecorder(stream);
audioRecorder.addEventListener('dataavailable', e => {
audioChunks.push(e.data);
});
startButton.addEventListener('click', () => {
audioChunks = [];
audioRecorder.start();
output.innerHTML = 'Recording started! Speak now.';
});
stopButton.addEventListener('click', () => {
audioRecorder.stop();
output.innerHTML = 'Recording stopped! Click on the play button to play the recorded audio.';
});
playButton.addEventListener('click', () => {
const blobObj = new Blob(audioChunks, { type: 'audio/webm' });
sendAudioToGCP(blobObj).then(transcript => {
if (transcript !== null) {
console.log('Transcript:', transcript);
} else {
console.log('Error sending audio to GCP');
}
});
const audioUrl = URL.createObjectURL(blobObj);
const audio = new Audio(audioUrl);
audio.play();
output.innerHTML = 'Playing the recorded audio!';
});
}).catch(err => {
console.log('Error: ' + err);
});
</script>
</body>
</html>
I have created API KEY for gcp project , please tell if I am missing any setup on gcp aswell
ps : also tell if it is possible using plain js , instead of using nodejs technology