How to Add Button Sound Effect in Elementor

See that buttons above?, give it a try.

When you click the cat sound button it will produce a meow sound, and when you click the dog sound it will produce a bark sound. In this article, we will show you how to add a sound effect to the button when it’s clicked in Elementor.

How to Add Button Sound Effect in Elementor

Step 1: Create a Button

Firstly, you need to create the button, you can customize the button as you like because Elementor has plenty of options to make your button look stunning.

Step 2: Prepare the Sound Effect Link

After the button is ready, now prepare the sound effect for the button and upload to the WordPress Media Library. You can use either MP3 or WAV file format for the sound effect. To upload the sound file to the WordPress Media Library, go to the WordPress dashboard and click Media -> Add New. You can drag and drop the files or click Select Files to upload them.

After the files are uploaded, click on one of the sounds, then on the appearing windows, copy the File URL to get the link for the sound effect.

Step 3: Add Following HTML Codes

To produce sound from the button we need to use following HTML codes.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  //Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends
});
</script>

Credit to Jim Fahad Digital for the codes.

Add an HTML widget into the canvas area and paste the code into the HTML Code block.

Use your sound effect link to replace the Sound-Effect-URL.

var audio1 = new Audio('Sound Effect URL')

Decide the CSS Classes for the button and change the default button-class CSS classes code.

$(".button-class").mousedown(function() {

After you changed the code, it will look like this.

Step 4: Add a CSS Classes to The Button

To connect the button to the codes, we need to add CSS Classes to the button, so the code knows which button is clicked and triggers the sound effects.

And that’s for one button with a sound effect. If you want to add more buttons with sound effects, it’s doable by copying some part of the code and tweaking it a little bit.

Adding More Buttons with Sound Effects

Create the Button or Copy Existing Button

You can copy the existing button by right-clicking the existing button and selecting copy then paste it into any section by right-clicking inside that section. And decide the CSS Classes for the button to be called by the HTML codes.

Copy Some Part of the Code and Adjust the Variable

Let’s copy some parts of the previous HTML code that trigger the sound effect, it’s the following code below

//Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends

After copying the code, paste it just below Audio 1 Ends. Edit the variable audio1 and all the code that uses the audio1 variable on the newly created code to audio2.

Then replace the URL for the sound effect if you’re using a new sound effect for the new button and edit the button-class code to your newly created button CSS Classes. The final codes Will look like the following image.

Your newly created button now will have a sound effect too when clicked.

The Bottom Line

Audio elements are among the great addition to a website. They not only provide an attractive element to the websites but also help in creating a long-lasting impression to the end-users. However, action or result should only be accompanied by a sound if it greatly reinforces or clarifies an important message to the user. Notifying the user of something that requires their attention, so it’s not giving a negative impact on your website instead.