How to Add Text to Speech On a Website?

How to Add Text to Speech On a Website

Text-to-speech or speech synthesis is the artificial intelligence tool of human speech, which refers to listening to a written text loudly. How many people read websites worldwide, do you know? 

Approximately 2.8 million readers access webpages out of the almost 4.66 billion individuals that use the internet.”

For any kind of website, tools that convert text to speech on a website are helpful for any visually impaired users. So, if you want to add a TTS feature to your WordPress website, you are in the right article.

In this post, we have discussed how to add text to speech on a website. You will learn about the best text readers for blind people who can’t read on digital screens.

Benefits of Text-to-Speech

TTS tools are beneficial for various reasons:

  • They enhance accessibility for visually impaired users.
  • They improve the user experience for those who prefer listening to content.
  • They can increase engagement on websites with long articles or complex information.

How to Add Text to Speech in WordPress?

In WordPress, many plugins are available to use on a website, but Atlasvoice is undoubtedly the best text-to-speech WordPress plugin among them.

You can easily install it on your WordPress website and let your readers listen to the content.

The success of your website is greatly dependent on accessibility and user experience. By turning written text into a natural-sounding voice, text-to-speech gives your visitors an easy-to-use and pleasant experience while adding a whole new level to content consumption.

Atlasvoice can help with this. With the help of this WordPress plugin, you can quickly and simply add a text-to-speech capability to your website using this well-known AI-based audio publishing platform.

Having said that, let’s take a step-by-step look at how to quickly and simply use the plugin to integrate text-to-speech in WordPress.

First, download the plugin by visiting


There, you will be able to try for free version and you can download it. However, the button will take you over to the WordPress plugin repository page and you can download the plugin directly from there.

download text to audio plugin directly

After downloading the free version, you can install it on your WordPress website like other normal plugins you install and use.

install text to speech plugin on WordPress website

After installing successfully you need a create an account.

Now click on Text to Speech and there you can add custom settings like which pages or any particular post you want to add the TTS feature.

add TTS feature

After completing this section, you can visit any post page or any page to listen to audio.

listen to audio using text to speech plugin

Here if you click on the Listen button then you will be listening.

However, In the listening option, you can set up custom settings and change voice language.

set up custom settings and change voice language

The plugin will function immediately after activation and add the voice search icon to your particular page or post form automatically.

How do I add text to speech on a web page?

A web browser can use the Web Speech JavaScript API to enable Text-to-Speech functionality. Therefore, you can use this useful API—that is, its SpeechSynthesis interface—if you want to add text-to-speech capability to a text-heavy web page so that your readers can listen to the material.

For more details visit:

Initial code and support inspecting

To get started, let’s make a webpage with three buttons and a sample text that I want to have read out.

Html code:

<div class=buttons>

            <button id=play></button> &nbsp;

            <button id=pause></button> &nbsp;

            <button id=stop></button>


<article> <html lang=”en”>


    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Rabindranath Tagore</title>



    <h1>Rabindranath Tagore</h1>

    <p>Rabindranath Tagore (born May 7, 1861, Calcutta [now Kolkata], India—died August 7, 1941, Calcutta) was a Bengali poet, short-story writer, song composer, playwright, essayist, and painter who introduced new prose and verse forms and the use of colloquial language into Bengali literature, thereby freeing it from traditional models based on classical Sanskrit. He was highly influential in introducing Indian culture to the West and vice versa, and he is generally regarded as the outstanding creative artist of early 20th-century India. In 1913 he became the first non-European to receive the Nobel Prize for Literature.</p>

    <p>The son of the religious reformer Debendranath Tagore, he early began to write verses, and, after incomplete studies in England in the late 1870s, he returned to India. There he published several books of poetry in the 1880s and completed <em>Manasi</em> (1890), a collection that marks the maturing of his genius. It contains some of his best-known poems, including many in verse forms new to Bengali, as well as some social and political satire that was critical of his fellow Bengalis.</p>



The narration will be controlled by the buttons. It is now important to confirm whether the SpeechSynthesis interface is supported by the UA. To do this, we employ JavaScript to swiftly determine if the window object possesses the ‘speechSynthesis’ attribute.


onload = function() {

  if (‘speechSynthesis’ in window) {

      /* speech synthesis supported */


  else {

      /* speech synthesis not supported */



The first thing we do, if speechsynthesis is accessible, is create a reference for it and assign it to the synth variable. For the three buttons (Play, Pause, and Stop), we also establish references and click event handlers. We also begin a flag with the false value, the purpose of which will become clear later in the article.

Thus, (onClickPlay(), onClickPause(), and onClickStop()) will all be triggered anytime a user hits one of the buttons.

Here is the javascript code:

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 the buttons */

    playEle.addEventListener(‘click’, onClickPlay);

    pauseEle.addEventListener(‘click’, onClickPause);

    stopEle.addEventListener(‘click’, onClickStop);

    function onClickPlay() {


    function onClickPause() {


    function onClickStop() {



Now creating the custom functions

Let’s now develop the click functionality for each of the three buttons that the event handlers will press.

Firstly, Play/Resume Button

We first examine the flag when we press the Play button. When the flag is false, we set it to true, preventing the code within the first if condition from running until the flag is false once more. This way, if the button is clicked later.

Next, we establish a new instance of the SpeechSynthesisUtterance interface, which contains speech-related data like as the speech’s language, speed, pitch, and loudness as well as the text that has to be read. We assign the article text to the utterance variable and add it as a constructor argument.

Javascript code:

function onClickPlay() {


        flag = true;

        utterance = new SpeechSynthesisUtterance(


        utterance.voice = synth.getVoices()[0];

        utterance.onend = function(){

            flag = false;




    if(synth.paused) { /* unpause/resume narration */




To choose a voice for the speech from the voices on the user’s device, use the getVoices() function. We use the utterance to assign the first accessible device voice since this function returns an array of all the voice possibilities in a device. synth = voice.obtainVoices()[0]; expression.

When the speech is over, the event handler indicated by the end property is called. Within it, we set the flag variable’s value back to false so that, upon another button press, the speech-starting function may be triggered.

Next, we execute the SpeechSynthesis.speak() function to begin the narration. Additionally, we use the read-only SpeechSynthesis.paused property to see if the narration is paused. If the narration is pausing, we have to use the SpeechSynthesis.resume() function to restart the narration when the button is clicked.


Let’s now develop the onClickPause() function, whereby we initially verify if the narration is still playing and hasn’t been halted. The SpeechSynthesis.speaking and SpeechSynthesis.paused features allow us to test these scenarios. Our onClickPause() code pauses the voice by using the SpeechSynthesis.pause() method if both criteria are fulfilled.


function onClickPause() {

    if(synth.speaking && !synth.paused){ /* pause narration */





The onClickPause() and onClickStop() functions are built the same. In case the speech is in progress, we terminate it by invoking the SpeechSynthesis.cancel() function, which eliminates every utterance.

Javascript function:

function onClickStop() {

    if(synth.speaking){ /* stop narration */

        /* for safari */

        flag = false;




Keep in mind that one event is automatically triggered upon speech cancellation, and we had previously included the flag reset code in it. We reset the flag in the onClickStop() method because there is a flaw in the Safari browser that prevents this event from happening. If you would rather not support Safari, you do not need to do so.

For All Browser Support

The voice synthesis API is supported in full or in part by the most recent versions of all current browsers. Webkit browsers have several bugs, including the inability to play voice from multiple tabs, erratic stopping that occasionally occurs, and speech that is not reset upon page reloading.

reset upon page reloading

For the final result, you can visit codepen. Here is the link:

How to add text-to-speech to an HTML page?

To add text-to-speech functionality to an HTML page, you can use the Web Speech API. Here is a simple example:

Html code:

<!DOCTYPE html>

<html lang=”en”>


  <meta charset=”UTF-8″>

  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Text to Speech</title>



    <textarea id=”text” rows=”10″ cols=”30″>Enter text here…</textarea><br>

    <button onclick=”speak()”>Speak</button>

    <script src=”text-to-speech.js”></script>



And Javascript function:

function speak() {

    var text = document.getElementById(‘text’).value;

    var speech = new SpeechSynthesisUtterance(text);



Here is the screenshot from Codepen:



How can I make my WordPress website a text-to-speech option?

You may use plugins like Atlasvoice to give a WordPress website text-to-speech features. All you need to do is install the plugin, register, and then adjust the settings to make text-to-speech available on specific pages or posts.

What is the JavaScript API for Web Speech, and how does it work?

Web browsers can integrate text-to-speech and speech recognition functions thanks to the Web Speech JavaScript API. Developers may allow text information on webpages to be read aloud by browsers by utilizing the SpeechSynthesis interface.

How can I use JavaScript to add text-to-speech to an HTML page easily?

Using the Web Speech API, text-to-speech may be added to an HTML page without any problem. In HTML, create a text and a button. When the button is pressed, use JavaScript’s SpeechSynthesisUtterance to read aloud the text typed in the text area.

Do web browsers have problems with text-to-speech compatibility?

The Web Speech API is supported by the majority of current browsers; nevertheless, Webkit browsers may have some problems, such as inconsistent halting and non-resetting speech upon page reload. For best results, it’s critical to test the functionality in several browsers.


Integrating text-to-speech functionality on a website enhances accessibility and user experience, making content more engaging and comprehensive. Using tools like Atlasvoice for WordPress Plugins or the Web Speech API for HTML pages.

Developers or website owners can easily enable this feature to provide an enriched browsing experience for their users and make their businesses grow.

Hopefully, this post has guided you successfully on how to add text to speech on a website.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top