Making websites talk with JavaScript

What if your website could talk to it’s visitors? Maybe it could read the content to them. It could be a great way to help make your website more accessible. What if it could be done on the client side using some simple JavaScript code and didn’t need server side processing?

Photo by Matthew Kwong on Unsplash

Modern web browsers have a lot of functionality built in that can be accessed to developers using JavaScript. One such thing is the Web Speech API. The Web Speech API is still considered experimental but has two parts that deal with synthesis and recognition.

We can use the synthesis part of the API to generate speech to the user.

Let’s create a simple form in a HTML page that will allow the user to enter in some text for the webpage to speak back to them.

<form>
<div>Say what:</div>
<div>
<input type="text" value="Hello world, how are you today?">
</div>
<div>
<button>Say it</button>
</div>
</form>

It’s a simple form with one text input, which we have pre-filled and a submit button. Let’s add some JavaScript to handle what happens when the submit button is pushed. It is going to create an instance of the SpeechSynthesisUtterance api and use that to utter the text the user has entered.

<script>
var synth = window.speechSynthesis;
var…