Text-to-Speech in Lightning Web Components (LWC) — Guide & Example

Posted by Vinay Vernekar 22nd November 2025

Quick guide to add browser-based Text-to-Speech in Lightning Web Components using the Web Speech API. Includes an example LWC and accessibility use cases.

Why add Text-to-Speech to your LWC?

Text-to-Speech (TTS) improves accessibility, enhances chatbot experiences, and enables voice-enabled self-service portals. Modern browsers expose the Web Speech API which makes implementing TTS straightforward without external services.

How it works

The Web Speech API provides speech synthesis through the SpeechSynthesis and SpeechSynthesisUtterance interfaces. You create an utterance with the text you want to speak, configure language and voice, then call speechSynthesis.speak(utterance).

Example Lightning Web Component

Below is a minimal LWC example demonstrating text-to-speech. Add this to your Salesforce static resources or LWC project and deploy to test in modern browsers (Chrome, Edge, Safari variations).

// textToSpeech.js
import { LightningElement, track } from 'lwc';

export default class TextToSpeech extends LightningElement {
    @track text = 'Hello from Lightning Web Components!';

    handleTextChange(event) {
        this.text = event.target.value;
    }

    speak() {
        if (!window.speechSynthesis) {
            // Fallback or show a message
            console.warn('Speech Synthesis not supported in this browser.');
            return;
        }

        // Cancel any existing speech
        window.speechSynthesis.cancel();

        const utterance = new SpeechSynthesisUtterance(this.text);
        utterance.lang = 'en-US'; // set language as needed

        // Optional: choose a specific voice
        const voices = window.speechSynthesis.getVoices();
        if (voices && voices.length) {
            // Example: pick the first voice that matches language
            const voice = voices.find(v => v.lang && v.lang.startsWith('en')) || voices[0];
            if (voice) utterance.voice = voice;
        }

        window.speechSynthesis.speak(utterance);
    }
}

Markup (template)

<template>
  <lightning-textarea label="Text to speak" value={text} onchange={handleTextChange}></lightning-textarea>
  <lightning-button label="Speak" onclick={speak} variant="brand"></lightning-button>
</template>

Best practices and tips

  • Provide a visible control to start/stop speech and always allow users to cancel ongoing speech with speechSynthesis.cancel().
  • Detect browser support before using; show a fallback message for unsupported browsers.
  • Respect user preferences and do not auto-play speech without consent (accessibility best practices).
  • Use language and voice selection when delivering multilingual content to improve naturalness.

Use cases

  • Accessibility for visually impaired users on Experience Cloud portals.
  • Voice-enabled chatbots and Agentforce interactions.
  • Audio-guided self-service steps and tutorials within Salesforce apps.

Conclusion

Adding TTS with the Web Speech API is a lightweight way to make Salesforce apps more accessible and engaging. For admins and developers, it requires minimal code and no external TTS services for many use cases — perfect for prototypes and internal tools. For business users, it delivers clearer customer experiences and improves self-service adoption.

Tags: