How to add Text-to-Speech Functionality in Blogger

Once I was visiting a website and I was reading a very long article and I was thinking that there should be a method or functionality on that website to use google bot to read all the text on that web page so that I can hear it and understand it.


After doing a long research I found a website where this functionality was added I decided to share this technique with you so that you can also add functionality to read your text aloud using Google bot.

Basically This article is about how to implement text to speech functionality in blogger it is not too much difficult to add this functionality in blogger blogs or in WordPress you will only need JavaScript and use Google API to allow this functionality to be added in your blog and work properly.

Today in this modern era everyone wants ease and this functionality will allow your visitors not to waste time in reading all the article they simply have to click the button and they will hear a voice of women reading all the text.

This text to speech functionality will be very much helpful for those people who are unable to read English but they can understand.

So I think you are getting board while reading all the text above so let's start our main job now I will share with you the steps by which you can implement this functionality in blogger.

1. You just have to follow the steps provided below and do as it is set in the steps to make this functionality work properly in your blog.
2. Go to Blogger Dashboard
3. Go to Theme/Template Section
4. Click Edit HTML
5. Now Search for </head> or <head/>
   

   To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

6. Now copy the code provided below and paste it before the tag we have searched in step 4.
   

   <style>
   [data-index] {
     position: relative;
     color: #333;
     transition: all .1s ease;
     will-change: transform, color, box-shadow;
     box-shadow: 0 0 0 transparent;
   }
   
   .current {
     z-index: 2;
     display: inline-block;
     background: #5F70EE;
     color: white;
     transform: scale(1.2);
     border-radius: 2px;
     box-shadow: -7px 0 0 #5F70EE, 7px 0 0 #5F70EE, 0px 5px 8px rgba(0, 0, 0, 0.1);
   }
   </style>
   <script>
   //<![CDATA[
   const synth = window.speechSynthesis;
   const el = document.querySelector('#allstar');
   const pgps = el.querySelectorAll('p');
   
   let currIndex = 0;
   let fullText = '';
   let playing = false;
   
   pgps.forEach(p => {
     const { innerHTML: html } = p;
     p.innerHTML = '';
   
     html.
     split(' ').
     filter(w => w.trim().length).
     reduce((prev, curr) => {
       const br = curr === '<br>';
       const elem = document.createElement(br ? 'br' : 'span');
   
       if (!br) {
         elem.dataset.index = currIndex;
         elem.innerHTML = curr;
         const space = document.createElement('span');
         space.textContent = ' ';
         prev.push(space);
       }
   
       prev.push(elem);
   
       fullText += `${curr.replace(`<br>`, ``)} `;
       currIndex += elem.textContent.length + 1;
   
       return prev;
     }, []).
     forEach(span => p.appendChild(span));
   });
   
   const utterThis = new SpeechSynthesisUtterance(fullText);
   utterThis.pitch = 1;
   utterThis.rate = .5;
   
   utterThis.onboundary = event => {
     const { charIndex: index } = event;
     const el = document.querySelector(`[data-index='${index}']`);
     if (el) {
       const els = document.querySelectorAll('[data-index]');
       els.forEach(e => e.classList.remove('current'));
       el.classList.add('current');
     }
   };
   
   document.addEventListener('click', () => {
     if (!playing) {
   
       synth.speak(utterThis);
       playing = true;
       return;
     }
   
     synth.cancel();
     playing = false;
   });
   synth.cancel();
   playing = false;
   //]]>
   </script>

7. Now search for <div class="post-body"> or <div class='post-body'>
8. Replace the above code with this code <div class="post-body" id="allstar">
   
9. Save Theme/Template

You are done now when ever you make a new post you have to wrap each peragraph in <p> and </p> tags.

This code will work when user clicks any where on the web page.

After doing all the things provided above now you can go and visit your website in see that this functionality will be added into your blog and this looks nice you should have to check it.

Here i have demo for you if you want to see it you can do that by going to the link below.
Demo

Conclusion:

In this article I have explained how to add a functionality of text to speech in blogger by using this technique you can make your users to listen to the text by simply clicking the button.

I hope you will like this today's article and if you do keep visiting this site and share this article with your friends who have websites so that they can also add this functionality in their websites and get good results in ranking
Plz Visit My Friend Blog: SoftWebTuts