JS Speech Synthesis: Turn Your JavaScript Code into Voice 🎯

Welcome to our comprehensive guide on JavaScript Speech Synthesis! In this lesson, we'll dive into the fascinating world of text-to-speech using JavaScript, making your web applications more interactive and accessible. Let's get started! 📝

Introduction

Have you ever wondered how to make your website talk? With the Web Speech API's Speech Synthesis, you can easily convert text into speech within your JavaScript applications. This feature is perfect for screen readers, voice-controlled devices, and even fun interactive applications! 💡

Setting Up the Environment 📝

Before diving into the code, ensure your browser supports the Web Speech API. Most modern browsers do, but it's always a good idea to double-check!

javascript

if ('speechSynthesis' in window) {
  console.log('Web Speech API is supported.');
} else {
  console.log('Web Speech API is not supported.');
}

Synthesis Speech API Overview 📝

The Speech Synthesis API consists of three main objects:

SpeechSynthesisVoice: Represents a voice for the speech synthesis.
SpeechSynthesisUtterance: Represents the text to be spoken.
SpeechSynthesis: A global object that controls the speech synthesis.

Creating a SpeechSynthesisUtterance 📝

Let's create a simple SpeechSynthesisUtterance object and set its text.

javascript

const utterance = new SpeechSynthesisUtterance('Hello, this is a test!');

Selecting a Voice 📝

By default, the browser will use the default voice. To choose a specific voice, you can access voices using the SpeechSynthesis.getVoices() method.

javascript

const voices = SpeechSynthesis.getVoices();
utterance.voice = voices[1]; // Select the second voice available

Customizing Speech Synthesis 📝

You can customize various aspects of the speech synthesis, such as pitch, rate, and volume:

javascript

// Set the speaking rate (default is 1)
utterance.rate = 1.5;

// Set the pitch (default is 1)
utterance.pitch = 1.2;

// Set the volume (default is 1)
utterance.volume = 1;

Speaking with SpeechSynthesis 📝

Now that our SpeechSynthesisUtterance is configured, let's speak!

javascript

window.speechSynthesis.speak(utterance);

Stopping Speech Synthesis 📝

To stop the currently speaking utterance, you can use the SpeechSynthesis.cancel() method.

javascript

window.speechSynthesis.cancel();

Listening to Events 📝

You can listen to various events related to the speech synthesis, such as onstart, onerror, onend, and more.

javascript

utterance.onstart = (event) => {
  console.log('Speech started');
};

utterance.onend = (event) => {
  console.log('Speech ended');
};

Putting It All Together 📝

Let's combine everything we've learned and create a practical example. We'll create a simple form that allows users to enter text and speak it.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Speech Synthesis Example</title>
</head>
<body>
  <h1>Speech Synthesis Example</h1>
  <form id="speech-form">
    <label for="text">Enter Text:</label>
    <input type="text" id="text" name="text" required>
    <button type="submit">Speak</button>
  </form>
  <script>
    document.getElementById('speech-form').addEventListener('submit', (event) => {
      event.preventDefault();
      const utterance = new SpeechSynthesisUtterance(event.target.text.value);
      // Select a voice
      const voices = SpeechSynthesis.getVoices();
      utterance.voice = voices[2];
      // Customize speech synthesis
      utterance.rate = 1.5;
      utterance.pitch = 1.2;
      utterance.volume = 1;
      window.speechSynthesis.speak(utterance);
    });
  </script>
</body>
</html>

Conclusion 📝

With the Web Speech API's Speech Synthesis, you can now easily turn your JavaScript applications into voice-enabled applications. This opens up a world of possibilities for screen readers, voice-controlled devices, and even fun interactive applications. Happy coding! 🎯