Useful Resources:

Introduction to Speech Synthesis in HTML

Try It Out

Enter text below and click "Speak" to hear the speech synthesis in action:

Speech synthesis is a powerful feature in modern web development, enabling applications to provide auditory feedback to users. This can be particularly useful for creating accessibility-friendly websites, interactive educational tools, or even entertainment apps. In this article, we’ll explore how to use the SpeechSynthesis API in HTML to give your applications the ability to “speak.”

What is Speech Synthesis?

Speech synthesis is the artificial production of human speech. The SpeechSynthesis API, available in modern browsers, allows developers to convert text to speech directly from the browser. This is a part of the Web Speech API, which also includes speech recognition capabilities.

Use Cases for Speech Synthesis

Accessibility: Making websites more inclusive for visually impaired users.
Interactive Learning: Teaching tools that read lessons out loud.
Voice Notifications: Reading out alerts or notifications when a user isn’t actively looking at the screen.
Entertainment: Creating games or fun applications with voice interactions.

Getting Started with SpeechSynthesis API

The SpeechSynthesis API is straightforward to use. It provides functions to queue text for speech, control playback, and adjust voice properties such as rate, pitch, and language.

Basic Example:

Here’s a simple HTML example that demonstrates the basic usage:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Speech Synthesizer Demo</title>
  </head>
  <body>
    <h1>Speech Synthesizer Example</h1>
    <textarea id="textToSpeak" rows="5" cols="50"></textarea><br>
    <button onclick="speakText()">Speak</button>

    <script>
      function speakText() {
        const text = document.getElementById('textToSpeak').value;
        const utterance = new SpeechSynthesisUtterance(text);
        window.speechSynthesis.speak(utterance);
      }
    </script>
  </body>
</html>

Customizing Speech

Voice Selection

The API supports multiple voices depending on the user’s system and browser. You can fetch and select different voices using speechSynthesis.getVoices():

const voices = window.speechSynthesis.getVoices();
utterance.voice = voices.find(voice => voice.name === 'Google UK English Female');

Adjusting Rate and Pitch

You can adjust the speed and tone of the speech using the rate and pitch properties of SpeechSynthesisUtterance:

utterance.rate = 1.2;  // Speeds up the speech
utterance.pitch = 0.8; // Lowers the pitch

Controlling Speech

You can also pause, resume, or cancel the speech using the following functions:

function pauseSpeech() {
  window.speechSynthesis.pause();
}

function resumeSpeech() {
  window.speechSynthesis.resume();
}

function cancelSpeech() {
  window.speechSynthesis.cancel();
}

Browser Compatibility

The SpeechSynthesis API is supported in most modern browsers, including:

Google Chrome
Mozilla Firefox
Microsoft Edge
Safari

To check if the API is supported:

if ('speechSynthesis' in window) {
  // API is supported
} else {
  alert("Sorry, your browser does not support speech synthesis.");
}

Conclusion

Speech synthesis in HTML is a fun and useful feature that can add significant value to your web projects. Whether you’re enhancing accessibility, creating educational tools, or building interactive voice applications, the SpeechSynthesis API provides a simple yet powerful way to integrate text-to-speech capabilities into your website.

Experiment with different voices, customize rate and pitch, and control speech playback to create a personalized experience for your users.