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

Posted by Vinay Vernekar 8th October 2025

Add accessible voice output to your Lightning Web Components using the browser Web Speech API. This guide shows a compact LWC example (template + JS) and practical use cases for accessibility, chatbots, and self-service portals.

Why add Text-to-Speech (TTS) to your LWC?

Text-to-Speech (TTS) makes applications more inclusive and engaging. With the Web Speech API built into modern browsers, you can provide spoken output without extra libraries—ideal for accessibility, voice-enabled chatbots, multilingual support, and self-service experiences.

When to use TTS in Salesforce

  • Accessibility for visually impaired users
  • AI-powered chatbots and Agentforce interactions
  • Multilingual self-service portals and help guides
  • Customer education, training, and audio-guided workflows

Quick LWC Example

The Web Speech API provides SpeechSynthesis and SpeechSynthesisUtterance to convert text to audio in supported browsers. Below is a minimal LWC implementation (HTML template + JS) you can copy into your component.

lwcTts.html

<template>
  <lightning-card title="Text to Speech (TTS)">
    <div class="slds-p-around_medium">
      <textarea class="slds-textarea" rows="4" placeholder="Type text to speak..." value={text} onchange={handleChange}></textarea>
      <div class="slds-m-top_small">
        <lightning-button label="Speak" onclick={speak} variant="brand" class="slds-m-right_small" />
        <lightning-button label="Stop" onclick={stop} variant="neutral" />
      </div>
    </div>
  </lightning-card>
</template>

lwcTts.js

import { LightningElement, track } from 'lwc';

export default class LwcTts extends LightningElement {
  @track text = '';

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

  speak() {
    if (!('speechSynthesis' in window)) {
      // Browser not supported
      alert('Text-to-Speech is not supported in this browser.');
      return;
    }

    const utterance = new SpeechSynthesisUtterance(this.text);
    // Optional: choose a voice, rate, pitch, volume
    utterance.rate = 1; // 0.1 to 10
    utterance.pitch = 1; // 0 to 2

    // Select a voice if available
    const voices = window.speechSynthesis.getVoices() || [];
    if (voices.length) {
      // pick first English voice as example
      const en = voices.find(v => v.lang.startsWith('en'));
      if (en) utterance.voice = en;
    }

    window.speechSynthesis.speak(utterance);
  }

  stop() {
    if (window.speechSynthesis && window.speechSynthesis.speaking) {
      window.speechSynthesis.cancel();
    }
  }
}

Best practices & considerations

  • Test in supported browsers (Chrome, Edge, Safari may differ in voices).
  • Respect user settings — provide controls to pause/stop and adjust volume or speed.
  • Fallback gracefully when speechSynthesis is unavailable (visual alternatives, alerts).
  • Consider privacy and accessibility — avoid auto-playing long content; allow users to opt-in.

Use cases in Salesforce

Integrating TTS into agents, portals, and bots enhances engagement and accessibility. For example, Agentforce chatbots can speak responses, and self-service portals can read instructions aloud to assist mobile or visually impaired users.

Conclusion

Adding Text-to-Speech to a Lightning Web Component is straightforward using the browser Web Speech API. It improves accessibility, broadens language support, and creates richer voice-enabled experiences without external services.

Why this matters: Salesforce admins, developers, and product owners can deliver more inclusive and engaging interfaces with minimal code changes—reducing support friction and improving customer satisfaction.

Tags: