How to Add/Remove Text-to-Speech Feature on Web Page

How to Add/Remove Text-to-Speech Feature on Web Page

Hello friends today we gonna learn about How to Add/Remove Text-to-Speech Feature on Web Page. So read this article, How to Add/Remove Text-to-Speech Feature on Web Page step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to Add/Remove Text-to-Speech Feature on Web Page

The text to speech feature refers to the spoken narration of a text displayed on a device. At the moment, devices such as laptops, tablets and mobile phones already have this featureAny application running on these devices, such as a web browser, can make use of it, and extends the functionalityThe story feature can be a suitable tool for an application requiring displays a lot of text, like offers the opportunity to listen to website visitors.

back to menu ↑

The Web Speech API

The Web Speech JavaScript API is the gateway to access to text-to-speech feature by a web browserSo if you want to introduce text-to-speech functionality to a web page with a lot of text, and let your readers listen to the content, you can use this handy API, or, to be more specific, the SpeechSynthesis interface

back to menu ↑

First code and support check

To start, let’s create a web page with me sample text to be told, and three buttons

The Hare With Many Friends

A hare was very popular with …

But he refused, saying that …

The moral of the story …

The buttons will the controls for narrationNow we need to make sure that the UA supports the SpeechSynthesis interface. To do this, we quickly check with JavaScript if the window object has the property ‘speechSynthesis’, or not.

onload = function () {if (‘speechSynthesis’ in window) {/ * speech synthesis supported * /} else {/ * speech synthesis not supported * /}}

If speech synthesis is available, we first create a reference for speechSynthesis which we assign to the synth variable. We also start a flag with the false value (we’ll see the target later in the post), and we create references and click on event handlers for the three buttons (Play, Pause, Stop) too.

When the user clicks one of the buttons, the respective function (onClickPlay (), onClickPause (), onClickStop ()) is called.

if (‘speechSynthesis’ in window) {var synth = speechSynthesis; var flag = false;

/ * references to the buttons * / var playEle = document.querySelector (‘# play’); var pauseEle = document.querySelector (‘# pause’); var stopEle = document.querySelector (‘# stop’);

/ * click event handlers for it buttons * / playEle.addEventListener (‘click’, onClickPlay); pauseEle.addEventListener (‘click’, onClickPause); stopEle.addEventListener (‘click’, onClickStop);

function onClickPlay () {} function onClickPause () {} function onClickStop () {}}

back to menu ↑

Create the custom functions

Now let’s build the click functions of the three individual buttons that is called by the event handlers.

1. Play / resume

When the Play button is clicked, first we check the flagIf it is false, we set it to true, so if the button is clicked later, the code in the first if the condition is not executed (not until the flag is false again).

There we go create a new instance of the SpeechSynthesisUtterance interface that contains information about the speech, such as the text to be read, the speech volume, the spoken voice, the speed, the pitch and the language of the speech. We add the article text as a parameter of the constructor, and assign it to the utterance variable.

function onClickPlay () {if (! flag) {flag = true; utterance = new SpeechSynthesisUtterance (document.querySelector (‘article’). textContent); utterance.voice = synth.getVoices ()[0]; utterance.onend = function () {flag = false;}; synth.speak (utterance);} if (synth.paused) {/ * unpause / resume narration * / synth.resume ();}}

We use the SpeechSynthesis.getVoices () method to convert designate a voice for the speech of the voices available on the user’s device. Since this method returns an array of all available speech options on a device, we can assign the first available device voice by using the utterance.voice = synth.getVoices ()[0]Statement.

The onend property represents an event handler, that is performed when the speech is finishedInside we change the value of the flag variable back to false so that the code with which the speech begins can be performed when the button is clicked again

Then we name the method SpeechSynthesis.speak () om start the storyWe must also check when the story is paused, for which we use the read-only property SpeechSynthesis.paused. If the story is interrupted, we should do that resumes the narration on the button click, which we can achieve by using the SpeechSynthesis.resume () method.

2. Break

Now let’s create the onClickPause () function which we check first if the story is in progress and has not been interruptedWe can test these conditions by using the SpeechSynthesis.speaking and SpeechSynthesis.paused properties. If both conditions are true, our onClickPause () function pauses the speech by calling the SpeechSynthesis.pause () method.

function onClickPause () {if (synth.speaking &&! synth.paused) {/ * pause narration * / synth.pause ();}}

3. Stop

The onClickStop () function is built the same way as onClickPause ()If the speech is in progress, we stop by calling the SpeechSynthesis.cancel () method like this removes all utterances

function onClickStop () {if (synth.speaking) {/ * stop narration * // * for safari * / flag = false; synth.cancel ();}}

Note that on canceling speech, the onend event is triggered automatically, and we already added the flag reset code into it. However, there is a bug in the Safari browser that prevents this event from firing, so we reset the flag in the onClickStop () function. You don’t have to if you don’t want to support Safari.

back to menu ↑

Browser support

All latest versions of modern browsers have full or partial support for the speech synthesis API. Webkit browsers don’t play multi-tab speech, pause is buggy (works but buggy), and speech doesn’t reset when the user reloads the page in Webkit browsers.

back to menu ↑

Working demo

Check out the live demo below or check out the full code on Github.

See the Pen à ??  ° à ¢  ?? A ?? A ?? £ Text to Speech – JavaScript by Compsmag (@hkdc) on CodePen.

back to menu ↑

How to Add/Remove Text-to-Speech Feature on Web Page: benefits

  • The How to Add/Remove Text-to-Speech Feature on Web Page tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to Add/Remove Text-to-Speech Feature on Web Page guide is free.

back to menu ↑

Faq

Tutorial summary of How to Add/Remove Text-to-Speech Feature on Web Page

In this guide, we told you about the How to Add/Remove Text-to-Speech Feature on Web Page; please read all steps so that you understand How to Add/Remove Text-to-Speech Feature on Web Page in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Add/Remove Text-to-Speech Feature on Web Page, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Add/Remove Text-to-Speech Feature on Web Page tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to Add/Remove Text-to-Speech Feature on Web Page. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to Add/Remove Text-to-Speech Feature on Web Page, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Add/Remove Text-to-Speech Feature on Web Page”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Add/Remove Text-to-Speech Feature on Web Page, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo
Shopping cart