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>
<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>
</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?
]]></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}
<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>
</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
<div id='postBody'>Your_content_goes_here</div>
Your_content_goes_here, and you need to follow the same thing in every post to make it work.