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.
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
First code and support check
To start, let’s create a web page with me sample text to be told, and three buttons
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. A hare was very popular with … But he refused, saying that … <! - Meer tekst … -> 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 () {}}
Create the custom functions
Now let’s build the click functions of the three individual buttons that is called by the event handlers. 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. 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 ();}} 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.
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.
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.
How to Add/Remove Text-to-Speech Feature on Web Page: benefits
Faq
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.
