Recently, while working on a personal project, I came up with the idea of trying to make the browser speak. I didn’t know what to do, so I looked for the answer on the Internet, and on MDN, I found the answer. Let’s take a look at how to make the browser speak through JavaScript.

1. The simplest example

Let’s create a basic function that takes what we want to say or a word, and then let our browser say it. We’ll take advantage of native APIspeechSyntehsis, which is available on most modern browsers.

function speak(sentence) {
    const utterance = new SpeechSynthesisUtterance(sentence)
    window.speechSynthesis.speak(utterance)
}

// test
speak('hello world');
Copy the code

Believe it or not, that’s all you need to get most browsers to say a word! So let’s look at what’s going on here.

The speak() function we created, which takes words as an argument. We create a voice object, which is essentially a language request object, with all the data about what to say and how to say it.

2. Customize your speed and pitch

Let’s take a slightly more complex example and try to modify the speed and pitch of the spoken word.

/** * @param pitch: pitch, value range: 0-2 Default value: 1 * @param rate: speed, value range: 0.1-10 Default value: 1 */
function speak(sentence, pitch, rate) {
    const utterance = new SpeechSynthesisUtterance(sentence)

    utterance.rate = rate
    utterance.pitch = pitch

    window.speechSynthesis.speak(utterance)
}
Copy the code

In the example above, we added pitch and speed to the original function. After we create the sound object, we can modify some properties directly on the sound object. However, this cannot be modified through constructors or setter methods at present.

Pitch is a floating point number ranging from 0 to 2. The default value is 1. The effect of this value may be limited by engine or sound.

Rate is a floating point number ranging from 0.1 to 10. The default value is 1.

Now, if we call the above code with a simple sentence, our browser will say the following at a normal speed and pitch:

speak('Hello world'.1.1)
Copy the code

3. How do I adjust the volume?

We can also adjust volume as well as pitch and speed, so let’s take a quick look at how to do that

/** * @param volume: volume, value range: 0 to 1 Default value: 0.5 */
function speak(sentence, volume) {
    const utterance = new SpeechSynthesisUtterance(sentence)

    utterance.volume = volume

    window.speechSynthesis.speak(utterance)
}
Copy the code

Modifying the previous code, we now pass in the volume parameter. Volume is also a floating point number, ranging from 0 to 1. The default value is 0.5.

Again, there is currently no way to set the volume through constructors or setter methods. Now, we pass in the desired sentence and volume to this function and we can hear the desired result.

4. Common functions

The speechSynthesis object has some functions that can come in handy. We can pause, resume, or even cancel the progress of a language. Let’s take a quick look:

const utterance = new SpeechSynthesisUtterance('Hello world');
window.speechSynthesis.speak(utterance);

/ / pause
window.speechSynthesis.pause();
/ / recovery
window.speechSynthesis.resume();
/ / cancel
window.speechSynthesis.cancel();
Copy the code

The code above will say the sentence we want, and the speech will pause, resume, and eventually cancel. You can also test out the above code in your browser.

Paused can also be determined directly by the Paused property on the speechSynthesis object, which returns a Boolean value indicating whether the audio is paused.

window.speechSynthesis.paused // Boolean
Copy the code

What if there’s a backlog of sentences waiting to be read? Well, there’s also a property pending, which checks if there’s any speech waiting to be said. It returns a Boolean value indicating whether a voice is pending.

const utterThis = new SpeechSynthesisUtterance('Hello world');
const utterThat = new SpeechSynthesisUtterance('Hello javascript');

window.speechSynthesis.speak(utterThis);
window.speechSynthesis.speak(utterThat);
window.speechSynthesis.pending;
Copy the code

When the above code is executed, two speech segments are queued and they are played in order. When we get the pending attribute, this value will return true because there is a second speech waiting to play.

Note: This pending property will always return false if you have only one voice, because there are no queued voices waiting to play.

5. Event monitoring

When we use SpeechSynthesisUtteranceapi, we can monitor several useful events. Let’s take a look:

const utterance = new SpeechSynthesisUtterance('Hello world')

utterance.addEventListener('start', () = >console.log('Utterance start'))
utterance.addEventListener('pause', () = >console.log('Utterance paused'))
utterance.addEventListener('resume', () = >console.log('Utterance resumed'))
utterance.addEventListener('end', () = >console.log('Utterance end'))

window.speechSynthesis.speak(utterance)
Copy the code

6. Summary

Hopefully this article is enough to get you playing with synthesized speech in your browser! You should now know how to start, stop and pause speech, as well as adjust the rate, pitch and volume of speech.

About me

I am a modefeelings code porter, will update 1 to 2 front-end related articles every week, interested in the old iron can scan the following TWO-DIMENSIONAL code attention or direct wechat search front-end cram school attention.

Mastering the front end is difficult, let’s make up the lesson together!

Use JavaScript to Make Your Browser Speak.