Join Our Community Join!

How To Add Auto Text Voice Featues On Blogger Like Royal UI - Dark Nexa

We can see this feature on Royal Ui Pro. Text-to-speech is a useful feature that helps you to improve the user experience.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Hello everyone, welcome Dark Nexa, nowadays Text-to-speech is a popular feature, We can see this feature is several websites nowadays. Text-to-speech is a useful feature that helps you to improve the user experience and accessibility of our website. We providing a Text-to-speech feature that was unstable currently because we notice that sometimes it doesn't work. However  So without wasting much time let's check how to implement it.

How To Add Auto Text Voice Featues On Blogger Like Royal UI

  • First of all, open your index.html file
  • Then find </head> tag and paste the following CSS just above it
<style>/* Text to speech (Teorzo) */svg.sphIc{fill:none;stroke:currentColor;stroke-width:1.25;width:20px;height:20px}.sphBtn{display:inline-flex;align-items:center;column-gap:8px;padding:10px;border:1px solid #e4e3e1;border-radius:10px;background:none;width:100%;max-width:none;justify-content:center;max-width:none}.sphBtn:hover{border-color:blue}</style>
  • Then go to place under <body> </body> tags where you need to add text to speech feature and paste the following code
  • <!--[ Text to Speech (Teorzo) ]-->
      <label class='sphBtn' id='play'><svg class='sphIc' viewBox='0 0 24 24' ><g transform='translate(2.000000, 2.000000)'><path d='M0.75,10.0001 C0.75,16.9371 3.063,19.2501 10,19.2501 C16.937,19.2501 19.25,16.9371 19.25,10.0001 C19.25,3.0631 16.937,0.7501 10,0.7501 C3.063,0.7501 0.75,3.0631 0.75,10.0001 Z'/><path d='M13.416,9.8555 C13.416,8.9515 8.832,6.0595 8.312,6.5795 C7.793,7.0995 7.742,12.5625 8.312,13.1315 C8.883,13.7025 13.416,10.7595 13.416,9.8555 Z'/></g></svg> Text to Speech (Beta)</label>
     
  • Then paste the following JS just above </body>
  • <script>/* Text to speech */if ("speechSynthesis" in window) {
          let play = document.getElementById("play");
       
          play.addEventListener("click", e => {
            let textEl = document.getElementById("postBody");
            let text = textEl.innerText;
            let postBody = new SpeechSynthesisUtterance();
       
            postBody.lang = navigator.language ? navigator.language: 'en';
            postBody.rate = 1;
            postBody.text = text;

            setTimeout(function() {
                textEl.focus();
            }, 0);
       
            if (speechSynthesis.paused) {
              play.innerHTML = '<svg class="sphIc" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><line x1="10" y1="15" x2="10" y2="9"></line><line x1="14" y1="15" x2="14" y2="9"></line></svg> Playing';
              return speechSynthesis.resume();
            }
           
            if (speechSynthesis.speaking) {
              play.innerHTML = '<svg class="sphIc" viewBox="0 0 24 24"><g transform="translate(2.000000, 2.000000)"><path d="M0.75,10.0001 C0.75,16.9371 3.063,19.2501 10,19.2501 C16.937,19.2501 19.25,16.9371 19.25,10.0001 C19.25,3.0631 16.937,0.7501 10,0.7501 C3.063,0.7501 0.75,3.0631 0.75,10.0001 Z"></path><path d="M13.416,9.8555 C13.416,8.9515 8.832,6.0595 8.312,6.5795 C7.793,7.0995 7.742,12.5625 8.312,13.1315 C8.883,13.7025 13.416,10.7595 13.416,9.8555 Z"></path></g></svg> Play again';
              return speechSynthesis.pause();
            }
           
            speechSynthesis.speak(postBody);
            play.innerHTML = '<svg class="sphIc" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><line x1="10" y1="15" x2="10" y2="9"></line><line x1="14" y1="15" x2="14" y2="9"></line></svg> Playing...';
           
            postBody.addEventListener('end', e => {
              play.innerHTML = '<svg class="sphIc" viewBox="0 0 24 24"><g transform="translate(2.000000, 2.000000)"><path d="M0.75,10.0001 C0.75,16.9371 3.063,19.2501 10,19.2501 C16.937,19.2501 19.25,16.9371 19.25,10.0001 C19.25,3.0631 16.937,0.7501 10,0.7501 C3.063,0.7501 0.75,3.0631 0.75,10.0001 Z"></path><path d="M13.416,9.8555 C13.416,8.9515 8.832,6.0595 8.312,6.5795 C7.793,7.0995 7.742,12.5625 8.312,13.1315 C8.883,13.7025 13.416,10.7595 13.416,9.8555 Z"></path></g></svg> Playing...';
            });
          });
        } else {
          alert('Sorry, Currently your browser does not support this');
        }</script>

    How to add a Text-to-speech feature using JS and CSS in Blogger?

  • First of all, go to your Blogger dashboard
  • Then click on the Theme option from the sidebar
  • Then click on the drop-down icon near Customize option
  • Then click on the Edit HTML option from the drop-down menu
  • Then Find ]]></b:skin> and paste the following CSS just above it or you can paste the following CSS just above </head> by creating <style> </style> Tags
  • /* Text to speech (Teorzo) */svg.sphIc{fill:none;stroke:currentColor;stroke-width:1.25;width:20px;height:20px}.sphBtn{display:inline-flex;align-items:center;column-gap:8px;padding:10px;border:1px solid #e4e3e1;border-radius:10px;background:none;width:100%;max-width:none;justify-content:center;max-width:none}.sphBtn:hover{border-color:blue}
  • Then paste the following code on where you need to add Text-to-speech for example paste it above or below <data:post.body/>
  • <!--[ Text to Speech (Teorzo) ]-->
      <label class='sphBtn' id='play'><svg class='sphIc' viewBox='0 0 24 24' ><g transform='translate(2.000000, 2.000000)'><path d='M0.75,10.0001 C0.75,16.9371 3.063,19.2501 10,19.2501 C16.937,19.2501 19.25,16.9371 19.25,10.0001 C19.25,3.0631 16.937,0.7501 10,0.7501 C3.063,0.7501 0.75,3.0631 0.75,10.0001 Z'/><path d='M13.416,9.8555 C13.416,8.9515 8.832,6.0595 8.312,6.5795 C7.793,7.0995 7.742,12.5625 8.312,13.1315 C8.883,13.7025 13.416,10.7595 13.416,9.8555 Z'/></g></svg> Text to Speech (Beta)</label>
     
  • Then find </body> and paste the following JS just above it
  • <script>/*<![CDATA[*//* Text to speech */if ("speechSynthesis" in window) {
          let play = document.getElementById("play");
       
          play.addEventListener("click", e => {
            let textEl = document.getElementById("postBody");
            let text = textEl.innerText;
            let postBody = new SpeechSynthesisUtterance();
       
            postBody.lang = navigator.language ? navigator.language: 'en';
            postBody.rate = 1;
            postBody.text = text;

            setTimeout(function() {
                textEl.focus();
            }, 0);
       
            if (speechSynthesis.paused) {
              play.innerHTML = '<svg class="sphIc" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><line x1="10" y1="15" x2="10" y2="9"></line><line x1="14" y1="15" x2="14" y2="9"></line></svg> Playing';
              return speechSynthesis.resume();
            }
           
            if (speechSynthesis.speaking) {
              play.innerHTML = '<svg class="sphIc" viewBox="0 0 24 24"><g transform="translate(2.000000, 2.000000)"><path d="M0.75,10.0001 C0.75,16.9371 3.063,19.2501 10,19.2501 C16.937,19.2501 19.25,16.9371 19.25,10.0001 C19.25,3.0631 16.937,0.7501 10,0.7501 C3.063,0.7501 0.75,3.0631 0.75,10.0001 Z"></path><path d="M13.416,9.8555 C13.416,8.9515 8.832,6.0595 8.312,6.5795 C7.793,7.0995 7.742,12.5625 8.312,13.1315 C8.883,13.7025 13.416,10.7595 13.416,9.8555 Z"></path></g></svg> Play again';
              return speechSynthesis.pause();
            }
           
            speechSynthesis.speak(postBody);
            play.innerHTML = '<svg class="sphIc" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><line x1="10" y1="15" x2="10" y2="9"></line><line x1="14" y1="15" x2="14" y2="9"></line></svg> Playing...';
           
            postBody.addEventListener('end', e => {
              play.innerHTML = '<svg class="sphIc" viewBox="0 0 24 24"><g transform="translate(2.000000, 2.000000)"><path d="M0.75,10.0001 C0.75,16.9371 3.063,19.2501 10,19.2501 C16.937,19.2501 19.25,16.9371 19.25,10.0001 C19.25,3.0631 16.937,0.7501 10,0.7501 C3.063,0.7501 0.75,3.0631 0.75,10.0001 Z"></path><path d="M13.416,9.8555 C13.416,8.9515 8.832,6.0595 8.312,6.5795 C7.793,7.0995 7.742,12.5625 8.312,13.1315 C8.883,13.7025 13.416,10.7595 13.416,9.8555 Z"></path></g></svg> Playing...';
            });
          });
        } else {
          alert('Sorry, Currently your browser does not support this');
        } /*]]>*/</script>

    If your website was in another language then don't forget to replace highlighted en with your website language code and you can also replace other blue colour highlighted sections.

    How to make it work?

    To make this feature work you need to follow the following steps too

  • First of all, go to your post or page where you need to make work text to speech and if you are in Blogger don't forget to change Compose view to HTML view, then paste the following code
    <div id='postBody'>
        Your_content_goes_here
      </div>
  • You need to replace your content on highlighted Your_content_goes_here, and you need to follow the same thing in every post to make it work.
  • Conclusion

    Hope this tutorial will help you to add a Text-to-speech feature to your website. If you have any doubts related to this tutorial, ask me in the comment. Don't forget to share it with your friends, may be it useful to them. Thanks for visiting, Have a nice day!
    Related Posts
    Hi I am Samir From Bangladesh. I Will Create A Ui/Ux Website And Blogger Theme. I like to playing to code.

    إرسال تعليق

    Cookies Consent

    This website uses cookies to ensure you get the best experience on our website.