How to play sounds using controller js and HTML in Lightning Components

Updated: Jun 9

Creating customized sounds that are triggered in Salesforce... this is not something typically done. At least not in my experience.


There are some cool ways to trigger sounds using managed packages. One particular option is found via Trailhead here: https://trailhead.salesforce.com/en/content/learn/projects/add-sound-effects-to-your-sf-org.


However, if you want something lighter and more flexible, you'll need to write the code yourself. We'll create a lightning component using the Aura framework, add it to a record page, and we'll trigger javascript to fire on init, which will make a sound. We'll also look at how to play the sound using HTML only. I'm assuming you already understand the basics of Aura components and, therefore, will not dive too much into the boilerplate code.


This goes without saying, but make sure you are doing this in a developer org...


Add sound as a static resource


  1. First find an audio file you want to play. There are some really great free resources here: https://freemusicarchive.org.

  2. Go to Salesforce/Setup/Static Resources. Click New.

  3. Add a Name. For this example, call it your_sound.

  4. Click Choose File and find your audio file. Select it.

  5. For Cache Control, select Public. Cache Control is important for determining who has access to the sound. For instance, if you are going to use it for a public community, you'll need to set it to Public.

  6. Click Save.


Create your Lightning Component


  1. Go to your Developer Console. Salesforce/Gear Icon/Developer Console.

  2. Click File/New/Lightning Component.

  3. Name it test_sound.

  4. Check the Lightning Record Page checkbox only.

  5. Click Submit.

  6. Within the <aura:component> tags add your aura:handler tag with an action that call the javascript function playSound. Your code should now look like this:

Create your Controller js


  1. On right-hand side, click CONTROLLER. This will load test_soundController.js in your Developer Console.

  2. Change myAction to playSound.

  3. Within playSound we need to get the your_sound static resource and assign it to an audio variable and then run the play function on that audio variable. Your controller js code should look something like this:

Add the lightning component to your record page


  1. Create a new Account record (this can be any record really).

  2. Click the Gear Icon and click Edit Page. This will take you to the Account Lightning Page. You can also get to the Lightning Page through Setup.

  3. On your left-hand side you will see a list of Components. Scroll down until you see the Custom components. Find test_sound and drag it onto your canvas. It doesn't matter where.

  4. Click Save.

  5. Click Back.


Now, refresh the record page and you should hear your sound/song play! Pretty cool, right? Now, you don't have to call the playSound function on init. You could call the playSound function when there is an event.


Back to init. Like most things programming, there are multiple ways to do this...


We could play the audio without using init, but instead using HTML. That would be nifty and more simple, wouldn't it?


We'll accomplish this by removing our <aura:handler> tag and replacing it with the <audio> tag. Your code should look something like this:

Save it and refresh your Account record. You should hear your sound/music again, and we did it with one line of code using just HTML!


Some things to note: Using the <audio> tag is more simple if playing the sound when the page loads, but it may be more difficult if you only want to play the sound under certain conditions. The latter is more likely to be the norm. You could use the <aura:if> tags to set conditions by which a sound would play, but again, this would likely end up in more code than necessary. Also, by using a javascript function to play the sound, we can reuse the code in multiple place and within multiple conditions. In the end, it's up to you!


Happy coding!


To get started with Cloud Pacific, go here to complete a simple form. A Cloud Pacific Account Manager will collaborate with you to clarify your needs and goals, and customize a service package and roadmap that will help your business grow and thrive on Salesforce. Reach out to us here!

648 views0 comments