How do I add read-aloud voice output to a website?

You can add read-aloud voice output to a website in two main ways:

1) Use the browser’s built-in Text-to-Speech API

Most modern browsers support the Web Speech API via speechSynthesis.

Basic example

<textarea id="text">Hello, this is read aloud text.</textarea>
<button onclick="readText()">Read Aloud</button>
<button onclick="stopReading()">Stop</button>

<script>
  function readText() {
    const text = document.getElementById("text").value;
    const utterance = new SpeechSynthesisUtterance(text);

    // Optional settings
    utterance.lang = "en-US";
    utterance.rate = 1;   // 0.1 to 10
    utterance.pitch = 1;  // 0 to 2
    utterance.volume = 1; // 0 to 1

    speechSynthesis.speak(utterance);
  }

  function stopReading() {
    speechSynthesis.cancel();
  }
</script>

Notes

• Works without extra servers or APIs.
• Voice quality depends on the user’s browser and installed voices.
• Some browsers require a user action like a button click to start speech.

---

2) Use a cloud Text-to-Speech service

If you want better voices, more languages, or consistent quality, use services like:

• Google Cloud Text-to-Speech
• Amazon Polly
• Microsoft Azure Speech
• ElevenLabs

Typical flow

1. User clicks “Read Aloud”
2. Send text to your backend
3. Backend calls the TTS provider
4. Return an audio file or stream
5. Play it in the browser with an <audio> element

Example playback

<audio id="player" controls></audio>

<script>
  async function playAudio() {
    const res = await fetch("/api/tts", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ text: "Hello world" })
    });

    const blob = await res.blob();
    const url = URL.createObjectURL(blob);
    document.getElementById("player").src = url;
    document.getElementById("player").play();
  }
</script>

---

Which should you choose?

• Simple and free: browser speech synthesis
• Best voice quality and consistency: cloud TTS
• Offline/local apps: browser speech synthesis or local TTS libraries

---

Accessibility tips

• Provide a visible play/pause/stop button
• Don’t autoplay speech unexpectedly
• Make sure the spoken content matches the visible text
• Support keyboard and screen reader users

If you want, I can show you:

1. a React example,
2. a vanilla JavaScript component,
3. or a server-side TTS example with a specific provider.