Search

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.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Hendri Risman

Hendri Risman

Hendri is a WordPress expert and a writer staff at WPPagebuilders. He writes solutions on how to get things fixed in WordPress a lot. Mostly without involving a plugin.
Want to save yearly expense up to $219? why not?

4 thoughts on “How to Add Button Sound Effect in Elementor”

  1. Hi, thanks a lot for this example!! It works perfectly with buttons. My question: does it work as well with images? I want to click on an image and have a sound played. And click again and have the sound stopped. Could you pleas help me with this question?
    Many thanks, Ingrid

    Reply
    • Hi Ingrid,
      Yes the code works for images as long as you give it the same CSS class (“.button-class”)

      And for adding the stop sound function to the image, you can add the following snippet to the code after the //Audio 1 Ends event.

      $(“.button-class”).dblclick(function() {
      audio1.pause();
      });

      Now you just need to double-click the image if you want to stop the sound

      Reply
  2. hi, thanks for your excellent script.
    But after executing the script by button click and playing an audiofile, the page scrolls back to the top, for every click you make on the buttons.
    Do you have a solution to prevent this? to freeze the page on the position where you make the button action.

    Reply
    • Hi Nik,
      You need to remove the default hash “#” from the button link to prevent the page from scrolling back to the top.

      Reply

Leave a Comment

Haven’t used Elementor Pro yet?