DEV Community

Cover image for SpeechSynthesis in <= 256 characters (Web Speech API)
Jan Küster 🔥
Jan Küster 🔥

Posted on

4 2 2 1 1

SpeechSynthesis in <= 256 characters (Web Speech API)

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:

Cover image by Scott Major on Unsplash

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up