Close Menu
SalesforceCodex
    Facebook X (Twitter) Instagram
    Trending
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    • How to Implement Dynamic Queueable Chaining in Salesforce Apex
    • How to Implement Basic Queueable Chaining in Salesforce Apex
    • How to Suppress PMD Warnings in Salesforce Apex
    • Top 10 PMD Issues Salesforce Developers Should Focus on in Apex
    • How to Use Graph API for Outlook-Salesforce Connection
    • Enhancing Performance with File Compression in Apex
    Facebook X (Twitter) Instagram
    SalesforceCodex
    Subscribe
    Friday, May 16
    • Home
    • Architecture
    • Salesforce
      • News
      • Apex
      • Integration
      • Books Testimonial
    • Questions
    • Certification
      • How to Prepare for Salesforce Integration Architect Exam
      • Certification Coupons
    • Integration Posts
    • Downloads
    • About Us
      • Privacy Policy
    SalesforceCodex
    Home»Salesforce»Add Text-to-Speech Capability in Lightning Component

    Add Text-to-Speech Capability in Lightning Component

    Dhanik Lal SahniBy Dhanik Lal SahniAugust 1, 2019Updated:August 5, 20199 Comments2 Mins Read
    Facebook Twitter Pinterest LinkedIn Tumblr Email
    Add Text-to-Speech Capability in Lightning Component
    Share
    Facebook Twitter LinkedIn Pinterest Email

    Nowadays we have lot of request for customer service automation. Salesforce chat bots is one of example. Similar to that we have Text-To-Speech feature to enhance customer self‑service application with high‑quality audio.  Let us see how we can implement Text-to-Speech in lightning component.

    We have Web Speech API to enable Text-To-Speech in our application. Web Speech API enable application to handle voice data. There are two components to this API:

    1. Speech synthesis SpeechSynthesis interface, a text-to-speech component that allows programs to read out their text content.
    2. SpeechRecognition interface, which provides the ability to recognize voice context from an audio input and respond appropriately.

    This blog is focused on first component Speech Synthesis.  For reading content from any paragraph we need two API features – voice information (e.g. kind of language) and content for speak.
    Voice Information: 

    SpeechSynthesisVoice interface is used to get voice types that system supports. It has all information like current voice language, default language etc.

    Content for speak:

    SpeechSynthesisUtterance is used to get different parts of text that we want to be spoken. It also has information about how to read it (e.g. language, pitch and volume.)

    Add Text-To-Speech in Lightning Component:

    By default all Web API is accessible in Salesforce application but lightning locker service may block these service. Speech Service is also blocked by locker service. So you have to disable locker service or create lightning component in API version 39.

    TexttoSpeech.cmp

        <lightning:card title="Text-To-Speech">
             <lightning:textarea aura:id="speechText" name="speechText" label="Enter some text" />
             <lightning:button variant="success" label="Speak" title="Speak" onclick="{! c.handleSpeech }"/>
       </lightning:card>
    

    TexttoSpeech.js

     handleSpeech: function(component, event, helper) {
            if('speechSynthesis' in window)
            {
                var text=component.find("speechText").get("v.value");
           		var speech = new window.SpeechSynthesisUtterance(text);
                speech.lang = 'en-US';
                window.speechSynthesis.speak(speech);
            }
            else
            {
                alert('speechSynthesis not supported');
            }
        }

    Important Attributes:

    lang: This will gets and sets the language of the utterance.

    pitch: This will gets and sets the pitch at which the utterance will be spoken at.

    text: This will gets and sets the text that will be synthesised when the utterance is spoken.

    volume: This will gets and sets the volume that the utterance will be spoken at.

    Text to Speech Demo:

    http://salesforcecodex.com/wp-content/uploads/2019/08/SalesforceCodex_TTS.mp4

    For further details check Web Speech API.

    lightning salesforce Text-To-Speech TTS
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Previous ArticleZoom-able Image in Lightning Component
    Next Article Running Salesforce App using Voice command – Speech-To-Text API
    Dhanik Lal Sahni
    • Website

    Related Posts

    By Dhanik Lal Sahni6 Mins Read

    Top 10 Salesforce Flow Features of Salesforce Summer ’25

    May 11, 2025
    By Dhanik Lal Sahni6 Mins Read

    Unlock the Power of Vibe Coding in Salesforce

    April 30, 2025
    By Dhanik Lal Sahni5 Mins Read

    How to Implement Dynamic Queueable Chaining in Salesforce Apex

    April 21, 2025
    View 9 Comments

    9 Comments

    1. sayanta on August 2, 2019 12:21 pm

      This is abosulutly stunning…Hats off to u and the lightning….

      Reply
    2. neetu on August 7, 2019 1:59 pm

      Its not working.

      Reply
      • Dhanik Lal Sahni on August 10, 2019 9:33 pm

        Have you tried using API version 39 for lightning component? Let me know, if it is not working. I will help you in resolving the same.

        Reply
    3. Markus on September 5, 2019 12:33 am

      doesnt work

      Reply
      • Dhanik Lal Sahni on September 5, 2019 2:00 am

        Hello Markus,

        This code will be blocked by locker service. So please disable locker service or change lightning version to 39. It will work in both cases.

        Thank You,
        Dhanik

        Reply
    4. John on October 27, 2021 6:01 pm

      I’m unable to change the api version to 39. The only available versions are from 48 to 53. What can I do in this case?

      Reply
      • Dhanik Lal Sahni on October 28, 2021 6:52 pm

        Hey John,

        You can try using Visual Studio Code and deploy it.

        Thank You,
        Dhanik

        Reply
    5. Srinivas on February 23, 2024 9:35 pm

      Can anyone help on how to make it work for API versions above 40 in salesforce

      Reply
      • Dhanik Lal Sahni on March 8, 2024 8:54 pm

        Hello Srinivas,

        You can use any text to speech API for this funcationality. There are lot of free API available like Veed.io, wideo.io etc.

        Thank You,
        Dhanik

        Reply
    Leave A Reply Cancel Reply

    Ranked #1 SALESFORCE DEVELOPER BLOG BY SALESFORCEBEN.COM
    Featured on Top Salesforce Developer Blog By ApexHours
    Recent Posts
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    • How to Implement Dynamic Queueable Chaining in Salesforce Apex
    • How to Implement Basic Queueable Chaining in Salesforce Apex
    • How to Suppress PMD Warnings in Salesforce Apex
    Ranked in Top Salesforce Blog by feedspot.com
    RSS Recent Stories
    • How to Connect Excel to Salesforce to Manage Your Data and Metadata February 9, 2025
    • Difference Between With Security and Without Security in Apex January 2, 2025
    • Top Reasons to Love Salesforce Trailhead: A Comprehensive Guide December 5, 2024
    • How to Utilize Apex Properties in Salesforce November 3, 2024
    • How to Choose Between SOQL and SOSL Queries July 31, 2024
    Archives
    Categories
    Tags
    apex (110) apex code best practice (8) apex rest (11) apex trigger best practices (4) architecture (22) Asynchronous apex (9) AWS (5) batch apex (9) batch processing (4) code optimization (8) code review tools (3) custom metadata types (5) design principle (9) einstein (3) flow (15) future method (4) google (6) google api (4) integration (19) integration architecture (6) lighting (8) lightning (64) lightning-combobox (5) lightning-datatable (10) lightning component (29) Lightning web component (61) lwc (50) named credential (8) news (4) optimize apex (3) optimize apex code (4) Permission set (4) Queueable (9) rest api (23) S3 Server (4) salesforce (140) salesforce apex (46) salesforce api (4) salesforce api integration (5) Salesforce Interview Question (4) salesforce news (5) salesforce question (5) solid (6) tooling api (5) Winter 20 (8)

    Get our newsletter

    Want the latest from our blog straight to your inbox? Chucks us your detail and get mail when new post is published.
    * indicates required

    Ranked #1 SALESFORCE DEVELOPER BLOG BY SALESFORCEBEN.COM
    Featured on Top Salesforce Developer Blog By ApexHours
    Recent Posts
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    • How to Implement Dynamic Queueable Chaining in Salesforce Apex
    • How to Implement Basic Queueable Chaining in Salesforce Apex
    • How to Suppress PMD Warnings in Salesforce Apex
    Ranked in Top Salesforce Blog by feedspot.com
    RSS Recent Stories
    • How to Connect Excel to Salesforce to Manage Your Data and Metadata February 9, 2025
    • Difference Between With Security and Without Security in Apex January 2, 2025
    • Top Reasons to Love Salesforce Trailhead: A Comprehensive Guide December 5, 2024
    • How to Utilize Apex Properties in Salesforce November 3, 2024
    • How to Choose Between SOQL and SOSL Queries July 31, 2024
    Archives
    Categories
    Tags
    apex (110) apex code best practice (8) apex rest (11) apex trigger best practices (4) architecture (22) Asynchronous apex (9) AWS (5) batch apex (9) batch processing (4) code optimization (8) code review tools (3) custom metadata types (5) design principle (9) einstein (3) flow (15) future method (4) google (6) google api (4) integration (19) integration architecture (6) lighting (8) lightning (64) lightning-combobox (5) lightning-datatable (10) lightning component (29) Lightning web component (61) lwc (50) named credential (8) news (4) optimize apex (3) optimize apex code (4) Permission set (4) Queueable (9) rest api (23) S3 Server (4) salesforce (140) salesforce apex (46) salesforce api (4) salesforce api integration (5) Salesforce Interview Question (4) salesforce news (5) salesforce question (5) solid (6) tooling api (5) Winter 20 (8)

    Get our newsletter

    Want the latest from our blog straight to your inbox? Chucks us your detail and get mail when new post is published.
    * indicates required

    Facebook X (Twitter) Instagram Pinterest YouTube Tumblr LinkedIn Reddit Telegram
    © 2025 SalesforceCodex.com. Designed by Vagmine Cloud Solution.

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Our website is made possible by displaying online advertisements to our visitors. Please support us by disabling your Ad Blocker.