Elementor: How to Add a Button Sound Effect

Need to find out how to add button sound effect on Elementor ? Find out in this article.

Do you see these 2 buttons?

When you click the Of the cat, it will make a meow, and when you click the button on the chien, it will produce a barking sound. In this article, we will show you how to add in Elementor a sound effect to the button when clicked.

How to add sound effect to button in Elementor

Step 1: Create a button

First you need to create the button, you can customize the button as you want, because Elementor has many options to make your button beautiful.

Step 2: Prepare the sound effect link

Once the button is ready, now prepare the sound effect for the button and upload it to the WordPress media library. You can use MP3 or WAV file format for sound effect.

To upload the sound file to the WordPress media library, navigate to the WordPress dashboard and click Media -> Add. You can drag and drop the files or click Select files to upload them.

Once the files are downloaded, Go to the media library and click on one of the sounds, then on the window that appears, copy the file URL to get the link for the sound effect.

Step 3: Add the following HTML code

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

<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>

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

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

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

Choose the CSS classes for the button and modify the code of the classes CSS class of the button

$(".button-class").mousedown

After modifying the code, it will look like this.

Step 4: Add a CSS class 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 this is for a button with a sound effect. You can now customize your button. And if you want to add more buttons with sound effects, it is doable by copying part of the code and modifying it a bit.

Added additional buttons with sound effects

Create the button or copy the 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.

Copy part of the code and adjust the variables and the CSS class name of the second button

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 by Audio 1 Ends. Modify the variable audio1 and all the code that uses the variable audio1 on the newly created code in audio2.

See also: Elementor: How to create an effect card from a portfolio

Then replace the sound effect url if you are using a new sound effect for the new button and change the code button class in your newly created button CSS classes.

The final code will look like the following image.

Replace the CSS class name of the button

Your newly created button will also have a sound effect when clicked. You can create as many as you want.

Audio elements are among the great additions to a Website. They not only provide an attractive element for websites but also help create a lasting impression on end users.

Read also: Elementor: How to migrate a WordPress website

However, the action or result should only be accompanied by sound if it significantly reinforces or clarifies an important message to the user. Inform the user of something that needs their attention, so that it does not give a negative impact on your Website in place.

Get Elementor Pro Now!

Conclusion

So ! That's all for this article which shows you how to add button sound effect to Elementor. If you have any concerns about how to get there let us know within Comments.

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...