Hello everyone, welcome here, 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 a Text-to-speech feature using JS and CSS in a website?
- 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?
First of all, go to your Blogger dashboardThen click on the Theme option from the sidebarThen click on the drop-down icon near Customize optionThen click on the Edit HTML option from the drop-down menuThen 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}<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
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>
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!
