We tend to see the web as a simple thing. A place to get some information, send an email, or publish a detailed report of our day on social media to get some virtual likes. When we want to do a little bit more, we usually turn to desktop software or mobile apps.<\/p>\n
Modern web browsers, however, have evolved from the simple pieces of software they were when the web was born to advanced programs crammed with useful APIs. In this article I will explain five things that are possible in (some) modern browsers and illustrate each API with some code examples and a little demonstration.<\/p>\n
It\u2019s worth knowing that some of these APIs don’t work in all modern browsers, and should never be the core of your website or web app, but a nice addition. Look at them as the cherry on the top of an already delicious pie.<\/p>\n
Sit back, relax and learn why the web is so amazing!<\/p>\n
We’re diving right in with one of the more fun APIs to play around with. Did you know a browser could talk? That’s right, apart from displaying text, it can also convert that text to spoken words.<\/p>\n
This API has some handy use cases, like providing a simple screen reader. Granted, most visually impaired people have a more capable screen reader installed on their device. This doesn\u2019t mean that they have access to their own devices all time, and providing a simple screen reader in the browser shows you care about them.<\/p>\n
You can of course also use this for some fun marketing purposes, or to have an interactive assistant right there on your website.<\/p>\n
Don’t overdo it, though, and always ask the user if they would like some spoken words, or prefer to read text themselves.<\/p>\n
Before we look at how to use the Web Speech API, let’s see where we can actually use it. Currently the API is supported<\/a> in all major browsers: Chrome, Firefox, Edge and Safari.<\/p>\n Ok, it’s time to start writing some code. The following few lines of code are all that’s required to make your browser talk:<\/p>\n We start by locating our speech synthesiser, it\u2019s located in the global window object. Let’s put it in a The second part of the code will create a new Once we know where to find the speech synthesiser, and we created our speech synthesis utterance, all we need to do is pass the utterance to the synthesizer. That wasn’t so difficult, was it?<\/p>\n I mentioned before that the utterance instance can also contain some characteristics on how to talk. Let’s look a bit deeper into this.<\/p>\n Each browser has a set of default voices we can choose from. Let’s see how you can choose another voice.<\/p>\n You can find a bunch of different male and female voices, each with its own accent. From the list of available voices, I chose Fiona’s. Once you know which voice you like, it\u2019s as simple as setting that voice as the It\u2019s also possible to change the voice a bit. The utterance has Now that we’ve seen how to choose a voice and customise it, let’s throw it all together:<\/p>\n See the Pen Speech Synthesis example<\/a> by Sam (@Sambego<\/a>) on CodePen<\/a>.<\/p>\nconst synth = window.speechSynthesis;
\nconst utterance = new SpeechSynthesisUtterance('Hey look, I can talk');
\nsynth.speak(utterance);<\/code><\/p>\nsynth<\/code> variable for easier use later on.<\/p>\nSpeechSynthesisUtterance<\/code> instance. This object will contain the text we want the browser to say, and optionally, some characteristics on how to pronounce this text.<\/p>\nconst utterance = new SpeechSynthesisUtterance('Hey look, I can talk with a female voice!');
\nconst voices = synth.getVoices()
\nconst voice = voices.find(voice => voice.name === 'Fiona');
\nutterance.voice = voice<\/code><\/p>\nvoice<\/code> property of your utterance.<\/p>\npitch<\/code> and speed<\/code> properties for you to customise.<\/p>\nconst utterance = new SpeechSynthesisUtterance('I talk slow, with a higher voice.');
\nutterance.pitch = 2;
\nutterance.rate = .7;<\/code><\/p>\nconst synth = window.speechSynthesis;
\nconst utterance = new SpeechSynthesisUtterance('Wow, this speech synthesis API is really cool!');
\nconst voices = synth.getVoices();
\nconst voice = voices.find(voice => voice.name === 'Fiona');
\nutterance.voice = voice;
\nutterance.pitch = 2;
\nutterance.rate = .7;
\nsynth.speak(utterance);<\/code><\/p>\n