This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.
Explainer
Make texts & UIs more accessible by using SpeechSynthesis in the browser: Create a new SpeechSynthesisUtterance + given text, pitch, rate, volume, lang, and a voice (vary by OS). Pass the utterance to speechSynthesis.speak. Tap into various events.
Additional Context
The SpeechSynyhesis is the “output” part of the Web Speech API, where the input counterpart is SpeechRecognition.
Despite it’s potential in regards to accessibility (people with reduced reading abilities or low literacy level) it’s not developed since years! Custom voices cannot be loaded, although remote voice loading is generally implemented.
Alternatives are either closed-commercial or require a server to generate and stream the speech to the client as audio. Polyfills require a huge package to be loaded to the client, because some browsers even don’t support it at all (hello Opera). It’s time the webdev community put some light on this again and don’t let speech synthesis become a walled garden solution.
Cover image by Scott Major on Unsplash
