Learn to Code via Tutorials on Repl.it

← Back to all posts
Add Speech To Your Site (JavaScript)
h
AdCharity (206)

The Code (JS)

//These variables are for illustrative purposes
var language = 'en-US',
	rate = 0.9,
	pitch = 1,
	volume = 1;
function playBack(command) {
	var speakObj = new SpeechSynthesisUtterance(command);
	speakObj.lang = language;
	speakObj.rate = rate;
	speakObj.pitch = pitch;
	speakObj.volume = volume;
	window.speechSynthesis.speak(speakObj);
}

General (Really, Read This)

Yeah I kind of just gave that function out there, but I like to keep stuff simple and brief - plus its extremely frustrating when you have a tutorial but they string out all the code of 50 lines and idk what its supposed to look like.
To make the browser speak for you, its actually EXTREMELY easy. It relies on Web Speech API, which is very experimental and pretty much only works on chrome (which I'm assuming most readers will have, being middle schoolers with chromebooks), firefox with a certain experiment activated, and a couple others. Definitely not Edge or Android webview. In short, don't rely on web speech api if you are trying to pull of a mainstream app for a large demographic of users.

Explaining the Code

First we need to create a new "SpeechSynthesisUtterance", basically an object with a couple of properties we can control.
Some core properties are the language, rate of speech, pitch of speech, overall volume, and what text should be said.
I and the api have made it pretty self explanatory, but I'll just introduce a couple boundaries over what values language, speech, pitch, etc. will take.

Language (also voice)

In my example, I've set the language to english US. It is possible to not only set the language, but also certain accents/voices. At least for me, the default accent is Google British UK. You can see how to change it in the links below. This variable will only take in BCP 47 language codes (at least, I'm pretty sure), so you can't just write "english" and expect it to work. However, if it is unset, it will usually use the html declared language (in the html="lang" idk I forget tag)
It is important to note that the voice is actually a different variable, but I really haven't used it much.

Rate

Rate is how quickly the web speech api will talk. It will take in values 0.1 to 10, ten being the highest. By default, it is set to one.

Pitch

Pitch is how high or low you want to voice. It will only take values 0 to 2, but its default is set to 1. It kind of depends on the browser, but generally, I'd probably leave it.

Text

Text is what is going to be spoken. In my function above, I just made a new "SpeechSynthesisUtterance" and set its text to the command I pass through the function. You can also set it with something along the lines of speechSynthesisUtteranceInstance.text, but I didn't feel like it.

Volume

The last variable I am going over is volume, which takes in values 0 to 1. Honestly, I kind of think this variable is rather useless - the user has ultimate control over the volume.

Function use

As you can see, I've given up a very very nice function. All you need to do is call it with playBack("text here"); and your browser (if compatible) will say it aloud! Honestly, since it is a synthesized voice, it is kind of robotic, but it is speech.

NOTES

You cannot call a new speech utterance as soon as the page loads (for chrome) because chrome was concerned that ads and what not would screw you over. Otherwise, it should work. In addition, mic, camera, and speech controls may not work in the repl environment (so open it up in a new tab). If that doesn't work, check or code of mention me with @AdCharity

Really good references: look up the mdn for it :)

Commentshotnewtop
MatthewDoan1 (216)

Why doesn't this have more votes??

AdCharity (206)

@MatthewDoan1 :D I appreciate it a lot (first tutorial actually)

MatthewDoan1 (216)

@AdCharity By the way, I think you should use let instead of var in JavaScript (that's just what I learned, don't know why people use var)

AdCharity (206)

@MatthewDoan1 let just has different scoping properties. In general I just use var when in doubt cause it will likely work