Enhancing Accessibility: Adding Text-to-Speech to Your Blogger Blog

 

Lately I have been so keen to Website Accessibility. And I've have been snuffing for different Accessibility functions that can be integrated on blogger or any other site with simple HTML, JavaScript and CSS edit.

On this site alone, I've implement;

Font resizer, 

Eye care and Dark mode

And some other little functions.

Still, I have always wanted to implement a  listen to article plugin. Just as seen on Medium and some other sites.

Text To Speech (TTS) is a technology that enables text to be converted into speech. 

Some months ago I asked on Quora and I got answers to use some external tools to implement 

 So I went on to try almost every  text to speech tools to see how I can  implement the listen to blog feature.

Here are top recommend tools I tried

• Website Voice 
• Ispeech. 
• Responsive Voice

These three are awesome but, but I can't afford to use such a third party service on this site.

Why? the cost (cheap actually) and script (its lightweight though)

I almost gave up until I came across this Hongiat page 

It came to my knowledge that there is a Web Speech JavaScript API  which is the the gateway to access the Text-to-Speech feature by a web browser. 

So, by this there won't be need for external scripts or programs. Well I didn't know about earlier; it's not like I went to a developer school.

I've finally digested the use of the Web Speech JavaScript API. 

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 interface.

In this comprehensive guide, we will explore how to make your Blogger blog more accessible by implementing a text-to-speech (TTS) feature. 

This will enable your readers to listen to your blog posts, making the content more accessible to a wider audience. 

I'll provide two versions of the code to cater to different preferences. And I will explain and analyze how the code works with more read reference.

Whether you're tech-savvy or a beginner, I've got you covered.

The Simple API Script

This is the simple script to implement this feature in your web page.

<script>
const message = new SpeechSynthesisUtterance();

// set the text to be spoken
message.text = "Hello World!";

// create an instance of the speech synthesis object
const speechSynthesis = window.speechSynthesis;

// start speaking
speechSynthesis.speak(message);
</script> 

Setting Up for Any WebPage or Site

To set on your webpage or your site make sure you have Access to adding HTML, CSS and JavaScript. And know where to place them.

It's very advisable to  take Backup of your site existing code before starting to implement this.

This is the HTML

<div>
    <button id="play"></button>
    <button id="pause"></button>
    <button id="stop"></button>
</div>

This simple Html is for the buttons to control the talk and speech function.

Place the HTML code where you what the button to appear on your site.

To continue, We'll check if the user's browser supports the SpeechSynthesis API. 

To do this, we'll use JavaScript to see if the 'speechSynthesis' property is available in the 'window' object.

This is the JavaScript 

This Javascript functions based on the trigger of the above buttons.

window.onload = function() {
    if ('speechSynthesis' in window) {
        // Speech synthesis is supported
    } else {
        // Speech synthesis is not supported
    }
}
if ('speechSynthesis' in window) {
    var synth = speechSynthesis;
    var flag = false;
    var playEle = document.querySelector('#play');
    var pauseEle = document.querySelector('#pause');
    var stopEle = document.querySelector('#stop');

    playEle.addEventListener('click', onClickPlay);
    pauseEle.addEventListener('click', onClickPause);
    stopEle.addEventListener('click', onClickStop);

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

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();
    }
}
function onClickPause() {
    if (synth.speaking && !synth.paused) { /* Pause narration */
        synth.pause();
    }
}


function onClickStop() {
    if (synth.speaking) { /* Stop narration */
        /* For Safari */
        flag = false;
        synth.cancel();
    }
}

How the Javascript Works

If the SpeechSynthesis API is supported, we proceed to create references for the API, set an initial flag, and add event handlers for the control buttons.

Then  Custom Functions for Control Buttons is created. The functions that correspond to the control buttons.

This includes

- Play/Resume

- Pause

- Stop

Note: In Safari, there's a bug that prevents the `onend` event from firing on speech cancellation, so we manually reset the `flag` in the `onClickStop` function. This is only necessary if you want to support Safari. 

Simple Implementation on Blogger (Blogspot) :

In this part, I will introduce the easiest way to add a TTS feature to your Blogger blog using the provided code.

Step 1: Get the Code

First, let's get the code. Based on the API I have created a simple JavaScript code snippet that you can easily add to your Blogger template.

 <script>
  let message = null;
  
  function readAloud() {
    const blogPostContent = document.querySelectorAll(".post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6, .post-body p");
    
    const combinedContent = Array.from(blogPostContent).map(element => element.textContent).join('\n');
    message = new SpeechSynthesisUtterance(combinedContent);
    
    const speechSynthesis = window.speechSynthesis;
    
    message.onend = function(event) {
      const encodedAttribution = "U2NoZW1lIHRoYXQgdGhpcyBpcyBhIHNpbXBsZSB0ZXh0LXRvLXNwZWFoIHdpZGdldCBCeSBTLiBEYXZpZCBQcmluY2U=";
      const decodedAttribution = atob(encodedAttribution);
      const attributionMessage = new SpeechSynthesisUtterance(decodedAttribution);
      speechSynthesis.speak(attributionMessage);
    };
    
    speechSynthesis.speak(message);
  }
  
  // Add more code for playback control (play, pause, stop) here.
</script>

You can add it the above javascript in your blogger template

- Go to "Edit Template"  and paste before </body>  tag

This code is designed to work with your blog post content and provides simple playback controls.

Make sure entity "post-body" is in accordance with the one on your site template.

Some blog templates uses "postBody". 

To verify this search for '<data:post.body/> the Div class tag above it is the one used in your template.  If it is not "post-body", change "post-body" in the code above to the one used in your template.

Note: the above code contains attribution. The raw code is below.

Step 2: Add the HTML

Now, let's add the HTML that enables users to initiate the TTS feature. 

<div class='tts' style='margin-bottom: 25px;'>
  <button onclick='readAloud()'>Read Aloud</button>
  <!-- Add buttons for playback control here -->
</div>

You can place this code above the post content on your blog on your template

You can add playback control buttons such as play, pause, and stop as per your preference. The provided code allows readers to listen to your blog posts simply by clicking the "Read Aloud" button.

Advance Implementation on Blogger

For those who want a more advanced TTS implementation with additional features, this part is for you.

Continue Reading

This rest of this content is for Members Only. You can access the full post, as a Member

Become a Member

 Step 1: Get the Code

This code is an updated custom script that extends the functionality of the basic version seen above. 

The advance Implementation includes playback control buttons for play, pause, and stop.

Here is the script

<b:if cond='data:blog.pageType == "item"'> <script> //<![CDATA[
  let message = null; 

  function readAloud() {
    const blogPostContent = document.querySelectorAll(".post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6, .post-body p");

    const combinedContent = Array.from(blogPostContent)
    .filter(element => {
      if (element.closest("#protected-content")) {
        return false; 
      }     
      if (element.getAttribute('data-tts-exclude') === 'true') {
        return false; 
      }
      return true;
    })
    .map(element => element.textContent)
    .join('\n');

    message = new SpeechSynthesisUtterance(combinedContent);

    const speechSynthesis = window.speechSynthesis;

    speechSynthesis.speak(message);
  }

  function togglePlayback() {
    const speechSynthesis = window.speechSynthesis;
    if (!message || speechSynthesis.paused || speechSynthesis.pending) {
      readAloud(); 
      document.getElementById("playPauseButton").innerHTML = '<i class="fas fa-pause"></i> Pause';
    } else {
      if (speechSynthesis.paused || speechSynthesis.pending) {
        
        speechSynthesis.resume();
        document.getElementById("playPauseButton").innerHTML = '<i class="fas fa-pause"></i> Pause';
      } else {
        
        speechSynthesis.pause();
        speechSynthesis.cancel();
        document.getElementById("playPauseButton").innerHTML = '<i class="fas fa-play"></i> Play';
      }
    }
  }

  function stopPlayback() {
    const speechSynthesis = window.speechSynthesis;
    if (speechSynthesis.speaking) {
      
      speechSynthesis.pause();
      speechSynthesis.cancel();
      document.getElementById("playPauseButton").innerHTML = '<i class="fas fa-play"></i> Play';
    }
  }

  document.getElementById("playPauseButton").addEventListener("click", togglePlayback);
  document.getElementById("stopButton").addEventListener("click", stopPlayback);
//]]>
  </script>   </b:if>

The above script was placed in a '<b:if> condition to make the script only run in blogger posts only. You can remove it if it would be a function for the whole site.

The JavaScript code for this version includes functions to control playback.

Step 2: Add the HTML

To implement the advanced version, use the HTML code below. It provides the same "Read Aloud" button as the simple version but also includes buttons for play, pause, and stop:

In this version, the HTML snippet includes additional buttons for controlling the playback of the text-to-speech feature. You have the "Play" button and the "Stop" button in addition to the "Read Aloud" button.

<b:if cond='data:blog.pageType == "item"'><div class='tts' style='margin-bottom: 25px;'><button onclick='readAloud()'>Read Aloud</button>
<button id='playPauseButton'><i class='fas fa-play'/> Play</button>
<button id='stopButton'><i class='fas fa-stop'/> Stop</button> </div> </b:if>

This code is also embedded in a b:if rule to display only in post page.

By using the Blogger condition <b:if>, the TTS feature is only displayed on individual post pages, ensuring that it doesn't interfere with other parts of your blog.

You can add it anywhere on your blog.

It is advisable for it to be on top of your site post body.

you can try to search for  Post Body Entry Content

              &lt;div class='post-body post-content' id='post-body'&gt;

Incase your template does not have that class, you can paste if before   &lt;  data:post.body/ &gt; .

To use this code on your web page, make sure you have the necessary HTML structure in place, including the elements with the specified IDs and classes. Additionally, ensure that you have the FontAwesome library loaded for the icon elements (e.g., `<i class="fas fa-pause"></i>`). 

How this Code Works

Here's how this code works:

1. The script defines a `readAloud` function that reads the content of certain HTML elements on a web page. It selects elements with the class "post-body" and specific header tags (h1, h2, h3, h4, h5, h6) and paragraph tags (p).

2. The script also defines an array of `elementsToExclude` that contains elements with specific IDs or classes (in this case, elements with the class "protected-content" or the ID "protected-content"). These elements will be excluded from the TTS.

3. Inside the `readAloud` function, it filters out the elements specified in `elementsToExclude` to prevent them from being read aloud. It then extracts the text content of the remaining elements and combines them into a single string.

4. The script uses the Web Speech API (`SpeechSynthesisUtterance`) to read the combined text content aloud. The TTS is initiated by the `readAloud` function.

5. The `togglePlayback` function controls the play/pause functionality. It checks if TTS is already playing, paused, or pending. Depending on the current state, it toggles between playing, pausing, or stopping the TTS.

6. The `stopPlayback` function stops the TTS if it's currently speaking.

7. Event listeners are set up to handle user interactions. When the user clicks the "playPauseButton," the `togglePlayback` function is called. When the "stopButton" is clicked, the `stopPlayback` function is called.

This code allows users to listen to the content of a web page while excluding elements marked as "protected-content."  You can add your own class and Id you don't want a text to speech for.

It provides a play/pause and stop button for user control.

How to Exclude Certain Elements from Web Text to Speech

This is base on and applicable to the  advanced code provided

To exclude and ignore content within a specific div with the id lile "protected-content" from the read-aloud function, you can add a conditional check to skip that element while processing the content.

Here's how you can modify your readAloud function to exclude content within that div:

// Check if the element has an ancestor with id="protected-content"
      if (element.closest("#protected-content")) {
        return false; // Exclude this element
      }

-  Change the Highlighted syntax to the class or id of what you what to exclude

-  If it is a div: class, it would be preceeded by "." while if it is a div: id" it would be "#"

Inthis case it was "#" because protected content is a div id 

i.e  - div id="protected-content"

If you want to use a specific HTML tag to exclude certain elements within the text-to-speech (TTS) functionality, you can add a  data-tts-exclude  attribute to those elements. 

Here's how you can do that:

Modify your HTML elements:

Add a custom data-tts-exclude attribute to the elements you want to exclude from TTS. For example:

<p data-tts-exclude="true">This content should be excluded from TTS.</p>
<p>Regular content that should be read aloud.</p>

And that is it thanks for being a member to view this I appreciate your support.  I and offering free installation service of this  Text to Speech Script. Just hit up.    Note that i didn't share any CSS hehe you have to find your ways on that

You can still choose either the basic or advanced version based on your preference and paste the corresponding code into your Blogger template. Don't forget to add the condition to control where the TTS feature is displayed on your blog, as mentioned in your previous message.

Conclusion:

Enhancing accessibility on your Blogger blog is not only considerate but also essential. By implementing a text-to-speech feature, you make your content available to a wider audience. Whether you opt for the simple or advanced version, and regardless of where you choose to place it, you're taking a step towards making your blog inclusive for all readers.

Note 

This API is handles by the user browser and no strong code on your site. The User browser would be responsible for the scanning and reading out of what is written on the screen. Almost all Updated Mordern browsers have full or partial support of this.

 However, it's worth noting that in Webkit browsers, there are some limitations. 

Speech may not play simultaneously from multiple tabs, and there are occasional issues with pausing (functional but not without bugs). 

Additionally, in Webkit browsers, speech isn't always automatically reset when a user reloads the page.

Ref and read more

https://www.hongkiat.com/blog/text-to-speech/ 

https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API

Dont Forget; Third-party Solutions

You can implement this feature and function on your site the more easier way with any of these tools.

Here are top recommend tools I tried and fell in Love with. They also use the web API

• Website Voice 
• Ispeech. 
• Responsive Voice

Implementing these third party solution is very simple, you just have to add their script or snippet on your site and set according to your taste.

Website Voice:

Website Voice provides text-to-speech functionality for any website. With a user-friendly interface, it allows you to easily convert written content into spoken words.

The tool offers customization options, allowing you to choose in their range of language and different voices. It also allows adjustment of speech rate to suit your preferences. 

Whether you want to enhance accessibility or provide an alternative way for users to engage with your content, Website Voice is a versatile solution.

iSpeech:

 iSpeech text-to-speech solution offers a range of features to cater to any needs. 

It supports multiple languages and voices, giving you the flexibility to create a personalized experience for your audience. 

The integration process is straightforward, requiring you to add a script or snippet to your site. iSpeech is not only useful for accessibility but also adds a dynamic element to your content, making it more engaging for users.

Responsive Voice:

 Responsive Voice stands out for its simplicity and effectiveness in adding text-to-speech capabilities to your website. 

The tool is designed to work seamlessly across various devices and browsers, ensuring a consistent experience for all users. 

It provides clear and natural-sounding voices, contributing to a pleasant listening experience. Implementation is also hassle-free, requiring a quick addition of the provided script or snippet.

These recommended tools, Website Voice, iSpeech, and Responsive Voice, offer efficient and user-friendly solutions for implementing text-to-speech functionality on your website. 

Whether you prioritize customization options, multilingual support, or a seamless experience across devices, these tools cater to diverse needs. 

By adding their respective scripts or snippets to your site, you can easily enhance accessibility and provide an engaging alternative for users who prefer to listen to your content.

You have the permission to build on and design the Snippets provided