Bringing Web Content to Life with Browser's Native Text-to-Speech

Did you know that modern browsers come with a built-in text-to-speech feature? It’s an incredibly useful tool, especially for users with disabilities who rely on screen readers to navigate websites. But beyond accessibility, it’s also a fun way to make your content more interactive.

In this article, I’ll show you how to create a simple blog post reader using JavaScript’s SpeechSynthesis API. Let’s turn our web pages into talking dinosaurs!

How Does It Work?

We can utilize the speechSynthesis API to read the content of a webpage aloud. This works by selecting specific elements on the page, extracting their text, and converting it into speech.

Here’s the JavaScript snippet I used to build my blog post reader:

speachStatus: '',
isSpeechSynthesisSupported() {
   return 'speechSynthesis' in window && 'SpeechSynthesisUtterance' in window;
},
pauseSpeach() {
   this.speachStatus = 'pause';
   speechSynthesis.pause();
},
playSpeach() {
   speechSynthesis.cancel();
   this.speakText(this.getSpeachText());
   this.speachStatus = 'speach';
},
resumeSpeach() {
   if (this.speachStatus == '') {
       this.playSpeach();
   } else {
       this.speachStatus = 'speach';
       speechSynthesis.resume();
   }
},
stopSpeach() {
   this.speachStatus = '';
   speechSynthesis.cancel();
},
getSpeachText() {
   const elements = document.querySelectorAll(".speach");
   const text = Array.from(elements).map(el => el.innerText).join(". ");
   return text.trim();
},
speakText(text, lang = null) {
   const utterance = new SpeechSynthesisUtterance(text);
   if (lang === null) {
       lang = document.documentElement.lang || "en-US";
   }
   utterance.lang = lang;
   speechSynthesis.speak(utterance);
}

Explanation

1. isSpeechSynthesisSupported() - Confirmation if the browser supports the text into speach.
2. playSpeach() – Starts the speech synthesis and reads aloud the content found under elements with the class .speach.
3. pauseSpeach() – Pauses the current speech.
4. resumeSpeach() – Resumes speech from where it was paused.
5. stopSpeach() – Cancels the speech completely.
6. getSpeachText() – Collects all elements with the class .speach, extracts their text, and joins them with a dot (.) to introduce natural pauses.
7. speakText() – Converts the extracted text into speech, using the default language of the webpage.

Creating a Simple Speech Player

Now that we have the logic in place, we can build a simple player with buttons for play, pause, resume, and stop. Here’s an example:

<button @click="playSpeach()">Play</button>
<button @click="pauseSpeach()">Pause</button>
<button @click="resumeSpeach()">Resume</button>
<button @click="stopSpeach()">Stop</button>

<div class="speach">This is a test blog post. Enjoy listening to it!</div>

Why This is Useful

• Accessibility – Helps visually impaired users consume content more easily.
• Hands-Free Experience – Allows users to listen while multitasking.
• Learning Aid – Can be used to improve pronunciation and language skills.
• Fun! – Who doesn’t like making their webpage talk?

I hope this makes you as excited as it made me! Give it a try and let me know how you use text-to-speech in your projects. Happy coding!