Recently we've been adding read-aloud support to a Django website. The tech stack for this site is Django with a bit of jQuery on the front end. The website is used exclusively in the United States, its content is offered in English and Spanish, and the read-aloud support is wanted for forms on the site. So where the site offered, for example:
with read-aloud support enabled the user will see:
and when the user clicks on one of the speaker icons the browser will vocalize the associated text.
It was straightforward to add this support using the Speech Synthesis API, which is widely available across browsers today. It is even easy to guide the browser on an appropriate choice of voice based on the language of the page:
const utterance = new SpeechSynthesisUtterance(txt);
utterance.lang = $('html').attr('lang');
window.speechSynthesis.speak(utterance);
One problem we hit with this approach was that some browsers do not have a United States Spanish (es-US ) voice, and the Spanish synthesized by an English (the likely default) voice sounds poor. In cases where the browser has no Spanish voice at all I don't think there is much we can do, but if the browser has some other Spanish voices, such as Mexican or Argentinian, choosing one of them is preferable to the default English voice for Spanish content. So we added some code at read-aloud initialization time to query the available voices using window.speechSynthesis.getVoices(), filtering the results to find any Spanish-language voice to use for Spanish content.
Here we got a surprise: window.speechSynthesis.getVoices() returned an iterable with size 0 in our initialization code, even though we knew the browser had many voices it could use! It turns out the voices are loaded asynchronously, and calling getVoices from the jQuery $(document).ready() function where we had placed our read-aloud initialization code was too early for accurate results. The fix was to move our initialization code into an onvoiceschanged handler:
js
window.speechSynthesis.onvoiceschanged = speechEnabledSetup;
Have you tried the Speech Synthesis API on a project or do you have any questions about this process? Please leave a comment below.
