Speech recognition enables voice interfaces in web apps. This guide covers implementation using Web Speech API and alternatives.
Web Speech API
Basic Implementation
typescript
const recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = (event) => {
const transcript = Array.from(event.results)
.map(result => result[0].transcript)
.join('');
console.log('Transcript:', transcript);
};
recognition.start();Server-Side Alternatives
Google Cloud Speech-to-Text
typescript
import speech from '@google-cloud/speech';
const client = new speech.SpeechClient();
export async function transcribeAudio(audioBuffer: Buffer) {
const [response] = await client.recognize({
audio: { content: audioBuffer.toString('base64') },
config: {
encoding: 'LINEAR16',
sampleRateHertz: 16000,
languageCode: 'en-US',
},
});
return response.results
.map(result => result.alternatives[0].transcript)
.join('\n');
}Conclusion
Web Speech API works well for browsers. For production apps, use server-side solutions like Google Cloud Speech or AWS Transcribe for better accuracy.