How to make your browser talk in ONE line of code
Modern browsers APIs are making this kind of task super easy to achieve!
Ok, I could have exaggerated a bit... But let's go straight to the point and then add some details.
In order to make your browser talk, just write this line of code:
How simple is that?! Many years ago it would have been unthinkable to do such a thing, but nowadays modern browsers give you access to the new Web Speech API.
Web Speech Api features
- Speech Synthesis API (aka text-to-speech): is the ability of a machine to translate a text into spoken speech automatically, and it's the API I used to make the browser talk.
- Speech Recognition API (aka speech-to-text): is the ability of a machine to identify words spoken aloud and convert them into readable text.
In order to make our browser speak, we use the SpeechSynthesisUtterance interface.
Firstly, we have to create a new SpeechSynthesisUtterance instance that accepts only one parameter (the sentence):
const utterance = new SpeechSynthesisUtterance('Hello!')
There are a lot of SpeechSynthesisUtterance properties we can manage:
- language (lang) → A string representing a BCP 47 language tag.
- speed (rate) → default=1, min=0.1, max=10
- pitch → default=1, min=0, max=2
- volume → default=1, min=0(mute), max=1
If you want to explore other features of SpeechSynthesisUtterance you can browse the MDN Doc.
Let's discover how we can "tune" the browser's voice:
utterance.lang = 'en-US' // A string representing a BCP 47 language tag utterance.rate = 0.5; // Represent the speed utterance.pitch = 2; utterance.volume = 0.5; // mute=0, max=1
And now, let the browser speak!
We are also able to listen to a lot of events too:
- onmark (See SSML mark tag)
Print out to the console once an event occurs:
utterance.onstart = (event) => console.log('Speech has started', event); utterance.onend = (event) => console.log('Speech has ended', event);
Speech Syntesis is well-supported on major browsers, on the contrary Speech Recognition is **partially supported .
If you want to check whether your browser supports this feature, you can browse caniuse.com to have more details.
NB: There are still some problems with "onpause" and "onresume", so use it carefully:
Theory is useless without practice, thus I created a stackblitz project with a bunch of SpeechSynthesisUtterance features you can play with.