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: Create a new SpeechSynthesisUtterance + given text, pitch, rate, volume, lang, and voice (vary by OS and browser). Tap into various events. Finally, pass the utterance to speechSynthesis.speak → 🔊

Additional Context

No external tools were used for the above text in any circumstance. 🤞

The SpeechSynyhesis is the "output" part of the Web Speech API, where the input counterpart is SpeechRecognition.

Despite its potential in terms of accessibility (people with limited reading skills or generally low literacy), it hasn't been developed in years! Custom voices cannot be loaded, although remote voice loading is generally implemented.

Alternatives are either closed + commercial or require a server to generate the voice and stream it as audio to the client. It's time for the webdev community to shed some light on this and not let speech synthesis become a walled garden solution.

I also wrote an article about maximising cross-browser compatibility for speech synthesis here on dev.to:

Cross browser speech synthesis - the hard way and the easy way

Jan Küster ・ Dec 7 '21

#webdev #browser #javascript #standards

Cover image by Scott Major on Unsplash