How To Build a Text to Speech Narrator with Web Speech API

Text to Speech

Text-to-speech narrator is an software or systems that convert written text into speech. It is a type of technology that uses artificial speech to read text, transform content into an audio. Narrators are used in a wide range of applications, including audiobooks, e-learning modules, navigation systems, and accessibility software for individuals with visual impairments.

The way TTS narrators work involves processing written text and using algorithms to generate audio that sounds like human speech. These systems have evolved significantly over the years, and modern TTS narrators can produce high-quality audio that sounds natural, with intonation, inflection, and pauses. Many TTS narrators offer customisation options to select the gender, accent, and voice style of the narrator, allowing users to tailor the audio output to their preferences.

Text-to-speech using the Web Speech API is a method of converting text to spoken words using a web browser’s built-in functions. The Web Speech API is a set of JavaScript Functions or Web API that allow us to integrate speech recognition and synthesis into their web applications.

To use the Web Speech API for text-to-speech, We can use the SpeechSynthesis interface, which provides methods for synthesizing text into speech. The interface allows us to specify the text to be synthesized, the voice to be used, and various parameters such as pitch, rate, and volume.

Window.speechSynthesis - Web APIs | MDN

Here’s an example of using the Web Speech API for text-to-speech:

var text = new SpeechSynthesisUtterance("Hello, I am Ashish");
speechSynthesis.speak(text);

In this example, we have used SpeechSynthesis interface for speak, create a new SpeechSynthesisUtterance object with the text to be converted, and call the speak method to convert the text into speech.

The Web Speech API is a powerful tool for adding text-to-speech functionality to web applications, and it is supported by most modern web browsers.

We have used this featured recently in our most of blog articles, Just see the use of this feature in one of our article.

Introduction to React Router: Understanding What, Why, and How.

We can create a new instance of the SpeechSynthesis interface, create a new SpeechSynthesisUtterance object with the text to be converted, set the voice, pitch, rate, and volume, and finally call the speak method to convert the text into speech.

// Create a new instance of the SpeechSynthesis interface
const synth = window.speechSynthesis;

// Create a new SpeechSynthesisUtterance object with the text to be synthesized
var textUtterance = new SpeechSynthesisUtterance("Hello, I am Ashish");

// Set the voice to be used
textUtterance.voice = synth.getVoices()[0];

// Set the pitch, rate, and volume
textUtterance.pitch = 1;
textUtterance.rate = 1;
textUtterance.volume = 1;

// Call the speak method to synthesize the text into speech
synth.speak(textUtterance);