Play sound in Lightning Component

Here is a sample component which plays a reminder tone on button click.

SoundNotificationCmp.cmp

<aura:component implements="flexipage:availableForAllPageTypes">
    <!-- attribute to play sound -->
    <aura:attribute name="playSound" type="Boolean" default="false"/>
    
    <!-- button to trigger sound event -->
    <lightning:button variant="neutral" title="Play Sound" onclick="{! c.triggerSoundEvent }">
        <aura:if isTrue="{!v.playSound}" >
            <lightning:Icon iconName="{!v.playSound ? 'utility:volume_high' : ''}" size="small" />
        </aura:if> Play Sound
    </lightning:button>    
    
    <!-- Sound -->
    <aura:if isTrue="{!v.playSound}" >
        <audio autoplay="true"><source src='/img/reminder.mp3' type='audio/mpeg'/>
            <source src='/img/reminder.ogg' type='audio/ogg; codecs=vorbis'/></audio>
    </aura:if>
</aura:component>

SoundNotificationCmpController.js

({
    triggerSoundEvent : function(component, event, helper) {
        component.set('v.playSound',true);      
        setTimeout(function() {
            component.set('v.playSound',false);
        }, 1000);
    }
})

Note that in the controller, the timeout is set for 1000ms which should be the time period in which the sound will be played, make sure that it is equal to the length of sound that you want to play if you are using your own sound file.

If you want to add some custom tone then
1. Simply add the music file to Static Resource. You can get them from here
Play sound in Lightning Component

2. Update the Component to use Static Resource instead of default Reminder tone.
SoundNotificationCmp.cmp

<aura:component implements="flexipage:availableForAllPageTypes">
    <!-- attribute to play sound -->
    <aura:attribute name="playSound" type="Boolean" default="false"/>
    
    <!-- button to trigger sound event -->
    <lightning:button variant="neutral" title="Play Sound" onclick="{! c.triggerSoundEvent }">
        <aura:if isTrue="{!v.playSound}" >
            <lightning:Icon iconName="{!v.playSound ? 'utility:volume_high' : ''}" size="small" />
        </aura:if> Play Sound
    </lightning:button>    
    
    <!-- Sound -->
    <aura:if isTrue="{!v.playSound}" >
        <audio autoplay="true">
            <source src='{!$Resource.customSound}' type='audio/mpeg'/>
        </audio>
    </aura:if>
</aura:component>

SoundNotificationCmpController.js

({
    triggerSoundEvent : function(component, event, helper) {
        component.set('v.playSound',true);      
        setTimeout(function() {
            component.set('v.playSound',false);
        }, 1000);
    }
})

Was this post useful? If yes then please share.



Comments (2)

  1. Jean-Baptiste chamant says:

    Hello I have a problem with this component :

    Uncaught Unable to find action ‘triggerSoundEvent’ on the controller of c:SoundNotificationCmp

    Have you an idea ?

    Thanks in advance

    • Please make sure that the controller of the lightning component has a method like this, and as JS is case sensitive look for that as well, let me know if that worked for you.
      triggerSoundEvent : function(component, event, helper) {
      component.set(‘v.playSound’,true);
      setTimeout(function() {
      component.set(‘v.playSound’,false);
      }, 1000);

Leave a Comment

All fields marked with an asterisk (*) are required


shares