Talk to your PWA and have it talk back — Speech Recognition & Synthesis (FieldKit companion)
A bonus capability for FieldKit , the field-notes PWA I built across this series ( code on GitHub ). The series wrapped at part 7, but I said the app didn't have to be done — and voice is too good a fit for a field tool to skip. Out in the field your hands are busy, so: dictate a note by talking, and have any note read back to you. Both come from the Web Speech API, and both are a handful of…
FieldKit, a field-notes Progressive Web App (PWA), has gained a bonus capability due to the addition of speech recognition and synthesis features, enabling users to dictate and have notes read back to them. This functionality is made possible by the Web Speech API, which consists of two parts: SpeechSynthesis (text-to-speech) and SpeechRecognition (speech-to-text).
While SpeechSynthesis is broadly supported, reliable, and works offline, SpeechRecognition is powerful but uneven, with varying support across different browsers. This article explains how to implement both features in a PWA.
To implement text-to-speech, a function called speak() is created, which takes a text string and an optional language parameter. The function first checks if speech synthesis is supported in the current browser, and if not, an error is thrown. Next, any existing utterances are canceled, a new SpeechSynthesisUtterance object is created, and the text is set as its content. The lang parameter is set to the desired language code, and finally, the utterance is spoken using window.speechSynthesis.speak().
When it comes to dictating notes, the SpeechRecognition API is used. However, it requires vendor prefixing in most browsers, so a Recognition object is created with a fallback for webkitSpeechRecognition. The recognition object is configured with lang set to 'en-US', interimResults enabled for streaming words as they are spoken, and continuous mode set to false, stopping the recognition after one phrase.
The onresult event handler iterates through the results, separating interim and final results, and updates the live transcript and final transcript accordingly. The dictationBase variable holds the accumulated final transcript, which can be used as the initial text in the note composer when dictation is stopped.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
