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.

Add Read Articles aloud on Blogger


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

Listen to article on medium


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

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.  {alertInfo}

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


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

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.



Also View :

Grab This URL

URL:
HTML link code:
BB (forum) link code:

How Would You Like to Support


Pay Now BMC Page
Bank Details is Available on Request
Support by Buying a Coffee: S David Prince Works Best with Your Support