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.

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

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();
    }
}
```

3. Stop:

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

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.

You can add it the above javascript in your blogger template

- Go to "Edit Template"  and paste before

 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

The above script was placed in a ' 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.

Read Aloud
 Play
 Stop 
  

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

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

              <div class='post-body post-content' id='post-body'>

Incase your template does not have that class, you can paste if before   <  data:post.body/ > .

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., ``). 

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

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:

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

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 {alertSuccess}

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.