{"id":29015,"date":"2017-01-23T23:01:45","date_gmt":"2017-01-23T15:01:45","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29015"},"modified":"2017-10-27T00:07:16","modified_gmt":"2017-10-26T16:07:16","slug":"text-to-speech","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/text-to-speech\/","title":{"rendered":"How to Add Text-to-Speech Feature on Any Web Page"},"content":{"rendered":"

The text-to-speech<\/strong> feature refers to the spoken narration of a text<\/strong> displayed on a device. At present, devices such as laptops, tablets, and mobile phones already have this feature<\/strong>. Any application running on these devices, such as a web browser, can make use of it<\/strong>, and extend its functionality<\/strong>. The narration feature can be a suitable aid for an application that displays plentiful text<\/strong>, as it offers the option of listening<\/strong> to website visitors.<\/p>\n

The Web Speech API<\/h2>\n

The Web Speech JavaScript API<\/a><\/strong> is the gateway to access the Text-to-Speech feature by a web browser<\/strong>. So, if you want to introduce text-to-speech functionality on a text-heavy web page, and allow your readers to listen to the content, you can make use of this handy API, or, to be more specific, its SpeechSynthesis<\/code><\/a> interface<\/strong>.<\/p>\n

Initial code & support check<\/h2>\n

To get started, let\u2019s create a web page with me sample text to be narrated<\/strong>, and three buttons<\/strong>.<\/p>\n

\r\n<div>\r\n    <button id=play><\/button>\r\n    <button id=pause><\/button>\r\n    <button id=stop><\/button>\r\n<\/div>\r\n<article>\r\n    <h1>The Hare With Many Friends<\/h1>\r\n    <img src=\"hare-and-friends.jpg\">\r\n    <p>A hare was very popular with...<\/p>\r\n    <p>But he declined, stating that...<\/p>\r\n    <!-- More text... -->\r\n    <blockquote>Moral of the story...<\/blockquote>\r\n<\/article>\r\n<\/pre>\n
The buttons will be the controls for the narration<\/strong>. Now we need to make sure if the UA<\/abbr> supports the SpeechSynthesis<\/code> interface. To do so, we quickly check with JavaScript if the window<\/code> object has the 'speechSynthesis'<\/code> property<\/strong>, or not.<\/p>\n
\r\nonload = function() {\r\n  if ('speechSynthesis' in window) {\r\n      \/* speech synthesis supported *\/\r\n  }\r\n  else {\r\n      \/* speech synthesis not supported *\/\r\n  }\r\n}\r\n<\/pre>\n
If speechSynthesis<\/code> is available, first we create a reference for speechSynthesis<\/code><\/strong> that we assign to the synth<\/code> variable. We also initiate a flag<\/strong> with the false<\/code> value (we\u2019ll see its purpose later in the post), and we create references & click event handlers<\/strong> for the three buttons (Play, Pause, Stop) as well.<\/p>\n
 Recommended Reading:<\/strong>\n  15 JavaScript Methods For DOM Manipulation for Web Developers<\/a><\/p>\n
When the user clicks one of the buttons, its respective function (onClickPlay()<\/code>, onClickPause()<\/code>, onClickStop()<\/code>) will be called.<\/p>\n
\r\nif ('speechSynthesis' in window){\r\n    var synth = speechSynthesis;\r\n    var flag = false;\r\n\r\n    \/* references to the buttons *\/\r\n    var playEle = document.querySelector('#play');\r\n    var pauseEle = document.querySelector('#pause');\r\n    var stopEle = document.querySelector('#stop');\r\n\r\n    \/* click event handlers for the buttons *\/\r\n    playEle.addEventListener('click', onClickPlay);\r\n    pauseEle.addEventListener('click', onClickPause);\r\n    stopEle.addEventListener('click', onClickStop);\r\n\r\n    function onClickPlay() {\r\n    }\r\n    function onClickPause() {\r\n    }\r\n    function onClickStop() {\r\n    }\r\n}\r\n<\/pre>\n
Create the custom functions<\/h2>\n
Now let\u2019s build the click functions<\/strong> of the three individual buttons that will be called by the event handlers.<\/p>\n
1. Play\/Resume<\/h3>\n
When the Play button is clicked, first we check the flag<\/code><\/strong>. If it\u2019s false<\/code>, we set it to true<\/code>, so if any time the button is clicked later, the code inside the first if<\/code> condition won\u2019t execute<\/strong> (not until the flag is false<\/code> again).<\/p>\n
Then we create a new instance of the SpeechSynthesisUtterance<\/code><\/a><\/strong> interface that holds information about the speech, like, the text to be read, speech volume, voice spoken in, speed, pitch and language of the speech. We add the article text as parameter of the constructor<\/strong>, and assign it to the utterance<\/code> variable.<\/p>\n
\r\nfunction onClickPlay() {\r\n    if(!flag){\r\n        flag = true;\r\n        utterance = new SpeechSynthesisUtterance(\r\n              document.querySelector('article').textContent);\r\n        utterance.voice = synth.getVoices()[0];\r\n        utterance.onend = function(){\r\n            flag = false;\r\n        };\r\n        synth.speak(utterance);\r\n    }\r\n    if(synth.paused) { \/* unpause\/resume narration *\/\r\n        synth.resume();\r\n    }\r\n}\r\n<\/pre>\n
We use the SpeechSynthesis.getVoices()<\/a><\/code> method to designate a voice for the speech<\/strong> from the voices available in the user\u2019s device. As this method returns an array of all the available voice options in a device, we assign the first available device voice<\/strong> by using the utterance.voice = synth.getVoices()[0];<\/code> statement.<\/p>\n
The onend<\/code><\/a> property represents an event handler that is executed when the speech is finished<\/strong>. Inside of it, we change the value of the flag<\/code> variable back to false<\/strong> so that the code that starts the speech can be executed<\/strong> when the button is clicked again<\/strong>.<\/p>\n
Then we call the SpeechSynthesis.speak()<\/code><\/a> method in order to start the narration<\/strong>. We also need to check if the narration is paused<\/strong>, for which we use the read-only SpeechSynthesis.paused<\/a><\/code> property. If the narration is paused, we need to resume the narration<\/strong> on the button click, which we can acheive by using the SpeechSynthesis.resume()<\/a><\/code> method.<\/p>\n
2. Pause<\/h3>\n
Now let\u2019s create the onClickPause()<\/code> function in which we first check if the narration is ongoing and not paused<\/strong>. We can test these conditions by making use of the SpeechSynthesis.speaking<\/a><\/code> and the SpeechSynthesis.paused<\/a><\/code> properties.  If both conditions are true, our onClickPause()<\/code> function pauses the speech<\/strong> by calling the SpeechSynthesis.pause()<\/a><\/code> method.<\/p>\n
\r\nfunction onClickPause() {\r\n    if(synth.speaking && !synth.paused){ \/* pause narration *\/\r\n        synth.pause();\r\n    }\r\n}\r\n<\/pre>\n
3. Stop<\/h3>\n
The onClickStop()<\/code> function is built similarly to onClickPause()<\/code><\/strong>. If the speech is ongoing, we stop it<\/strong> by calling the SpeechSynthesis.cancel()<\/a><\/code> method that removes all utterances<\/strong>.<\/p>\n
\r\nfunction onClickStop() {\r\n    if(synth.speaking){ \/* stop narration *\/\r\n        \/* for safari *\/\r\n        flag = false;\r\n        synth.cancel();\r\n    }\r\n}\r\n<\/pre>\n
Note that on the cancellation of speech, the onend<\/code> event is automatically fired<\/strong>, and we had already added the flag reset code inside of it. However, there\u2019s a bug in the Safari browser<\/strong> that prevents this event from firing, that\u2019s why we resetted the flag in the onClickStop()<\/code> function. You don\u2019t have to do it if you don\u2019t want to support Safari.<\/p>\n
Browser support<\/h2>\n
All latest versions of modern browsers have full or partial support<\/strong> for the speech synthesis API. Webkit browsers don\u2019t play speech from multiple tabs, pausing is buggy (works but buggy), and speech isn\u2019t reset when the user reloads the page in Webkit browsers.<\/p>\n
Working demo<\/h2>\n
Have a look at the live demo<\/a> below, or check out the full code on Github<\/a>.<\/p>\n
See the Pen \u00f0\u0178-\u00a3 Text to Speech \u2013 JavaScript<\/a> by HONGKIAT (@hkdc<\/a>) on CodePen<\/a>.<\/p>\n