How to Convert Text to Speech in Lightning Web Component (LWC)

Posted by Vinay Vernekar 19th October 2025

Learn how to add Text-to-Speech (TTS) to a Lightning Web Component using the browser Web Speech API. Improve accessibility, support multilingual voice output, and enable voice-enabled chatbots with minimal code.

Introduction

Text-to-Speech (TTS) converts written text into spoken words and is a powerful accessibility and UX enhancement for Salesforce applications. Modern browsers expose the Web Speech API, which includes speech synthesis capabilities through the SpeechSynthesisUtterance interface. In Lightning Web Components (LWC) you can call this API directly from client-side JavaScript — no extra libraries required.

Why use Text-to-Speech in LWC?

  • Enhanced accessibility: Helps visually impaired users consume content and interact with portals and self-service apps.
  • AI-powered chatbots: Add voice output to chatbots (including Agentforce) for more natural interactions.
  • Multilingual support: Speak responses in different languages without extra agents.
  • Voice-enabled self-service: Users can listen to instructions while performing tasks on mobile or hands-free.
  • Customer education & training: Turn written guides into audio for consistent onboarding and support.

How it works (Web Speech API)

The Web Speech API’s speech synthesis feature uses the SpeechSynthesisUtterance interface. Create an utterance, set its text and optional properties (language, pitch, rate, voice), and call speechSynthesis.speak(utterance). The browser handles playback.

Sample LWC JavaScript (client-side)

// textToSpeech.js
export default function textToSpeech(text, options = {}) {
  if (!window.speechSynthesis) {
    console.warn('Speech Synthesis not supported in this browser.');
    return;
  }

  const utterance = new SpeechSynthesisUtterance(text || '');
  if (options.lang) utterance.lang = options.lang;
  if (options.rate) utterance.rate = options.rate;
  if (options.pitch) utterance.pitch = options.pitch;
  if (options.voice) utterance.voice = options.voice; // optional: choose from available voices

  // Stop current speech and start new
  speechSynthesis.cancel();
  speechSynthesis.speak(utterance);
}

Usage in an LWC component

Call the helper from a button handler or when new chat messages arrive. For multi-language support, set utterance.lang to the appropriate locale (for example, en-US, fr-FR, or hi-IN).

Best practices

  • Check browser support and provide a graceful fallback or UI message when speech synthesis is unavailable.
  • Give users control: allow pause, resume, stop, and volume/rate adjustments.
  • Respect accessibility settings and user preferences — don’t autoplay speech without consent.
  • Test voices and languages across platforms (Windows, macOS, iOS, Android) — available voices differ by OS and browser.

References & Further reading

Demo video: Embed or link to a short walkthrough showing TTS in action in your LWC (optional).

Conclusion

Adding Text-to-Speech via the Web Speech API is a low-effort, high-impact enhancement for Lightning Web Components. It boosts accessibility, creates richer chatbot experiences, supports multilingual customers, and improves self-service workflows. For Salesforce admins and developers, TTS is an accessible feature to prototype and roll out quickly — and it’s especially valuable in contact centers, customer portals, and training applications.

Tags: