Letting the browser speak — the Web Speech API

“making your own cards and personalizing them will greatly increase your ability to remember new material and learn things that are important specifically to you.”

How to support auditory learning with the web

const word = '音乐';// Feature detect
if (
window.speechSynthesis &&
typeof SpeechSynthesisUtterance !== undefined
) {
const synth = window.speechSynthesis;
// get all the voices available on your browser
const voices = synth.getVoices();
// find a voice that can speak chinese
const voice = voices.
filter((voice) => voice.lang.indexOf('zh') === 0)[0];
// make the browser speak!
const utterThis = new SpeechSynthesisUtterance(word);
utterThis.voice = voice;
synth.speak(utterThis);
}

Troubleshooting missing voices on Android

// find a voice that can speak chinese
const voice = voices.
filter((voice) => voice.lang.indexOf('zh') === 0)[0];
// make the browser speak if it can!
if ( voice ) {
const utterThis = new SpeechSynthesisUtterance(word);
utterThis.voice = voice;
synth.speak(utterThis);
} else {
const utterThis = new SpeechSynthesisUtterance(word);
utterThis.voice = voices[0];
synth.speak('I\'m afraid I cannot speak Mandarin yet.');
}

Installing language support

Making it possible to get Chinese voices installed on my phone involved adding lanuage support…
… as well as fiddling with voice to text settings.
Interfaces like Nespresso’s error message that have no way of expressing their exact needs, only their broken states make me sad

Imagining the API I’d like

What I’d like to see is a permissions base model which downloads language packs as needed. Imagine if we a website tells you it wants to “install Chinese language support” giving you the options to block or allow

window.speechSynthesis.getVoicesForLanguage('zh').then(()=> {
speakMandarin();
}, () => {
notifyUserSoundIsDisabled();
});

Conclusions

Further reading

--

--

--

Travel fanatic, writer, web dev british hippyster on a mission to make the web all happy with rainbows, unicorns etc

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Developing Vue Apps with the Quasar Library — Range Slider Steps and Labels

JavaScript Best Practices — Unexpected Values and More

How to refactor without pain?

Debugging JavaScript Performance With NDB

Heading image

How to Avoid Browser Popup Blockers with JavaScript Code?

Getting Started with Vue Router with Vue 3

How to Combine Multiple Strings with JavaScript

Creating an English Vocabulary Note based on Node.js (3) — ESLint & Prettier

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jon Robson (David Lyall)

Jon Robson (David Lyall)

Travel fanatic, writer, web dev british hippyster on a mission to make the web all happy with rainbows, unicorns etc

More from Medium

Web Development the Beginning…

The First Step To OOP — JavaScript 🧐

Illusions of a Third Dimension

How to develop a QR code generator using React.js ??