Web Speech API Speech Recognition Demo
This Web Speech API Speech Recognition Demo uses getUserMedia() and the Web Speech API’s SpeechRecognition interface. It uses the following main SpeechRecognition properties: continuous, interimResults and lang.
How to use:
- Grant camera + microphone permissions.
On Safari, you also need grant access to Speech Recognition by enabling Siri or Dictation in System Preferences or Settings. - Select a language (Default is english. Auto detection is also available)
- Start a recording
- Speak in the chosen language a few times
- Stop the recording
Features:
- Real-time captions while recording
- Multi-language captions
- Generated
.rtt,.srtand.JSONfiles with the resulted transcription after a recording stops - Subtitle file generated and applied for the video playback
Works on:
- Chrome 33+
- Edge 79+
- Safari 14.1+ on macOS
- Safari on iOS 14.5+
- No support for Firefox and Opera yet
- Only works when connected to a network
- It takes a few extra seconds for the Speech Recognition API to figure out when a non-english sentence ends
Links:
- Web Speech API Article
- MDN Docs
- Browser support
- Code for this demo on GitHub: https://github.com/addpipe/Web-Speech-API-SpeechRecognition-Demo