Play Audio On Click With Elementor

Let’s add an audio on click button. In today’s fast-paced digital world, websites need to offer engaging and interactive content to capture the attention of visitors. One way to achieve this is by incorporating audio that plays on click using Elementor, a popular page builder for WordPress.

Why Include audio on click?

Audio is a powerful tool to convey emotions, provide additional context, and evoke specific responses from your website visitors. Whether it’s background music, sound effects, or spoken content, incorporating audio can:

    1. Increase Engagement: 

    2. Set the Tone

    3. Enhance Storytelling

Setup By Step

  • Go to the elementor page you wish to add the Audio on click button
  • Create your button, if not already done so.
    • You could even use an icon or image, the following steps are exactly the same.
  • Upload the audio MP3 file you wish to use and note down the full url to the file.
  • Add the HTML code element under your button and paste the below code.
				
					<script>
let audioButton = document.querySelector('.audio-button');
       audioButton.addEventListener('click', function(){
        var audio = document.getElementById("audio");

         if (audio.paused) {
            audio.play();
        }else{
            audio.pause();
            // audio.currentTime = 0
        }
      });
    </script>

    <audio id="audio" src="PLACE-AUDIO-FILE-URL-HERE"></audio>
				
			
html-element
html-code-audio-click
  • Replace the PLACE-AUDIO-FILE-URL-HERE text at the bottom of the code with the full url, of the audio file, you wish to use.
  • If you wish the file to restart each time on click, remove the // from line 10.
				
					// audio.currentTime = 0
				
			
  • Copy the class ID from the HTML code on line 2 = audio-button
  • Click on your button and go to the advanced tab > layout.
  • Paste audio-button in to the CSS Classes box.
audio-button-css-classes
  • Save your page and now go a try it out.

Conclusion

Incorporating audio elements that play on click using Elementor can significantly enhance your website’s engagement, storytelling capabilities, and overall user experience. By integrating audio, you can create a memorable browsing journey that sets your website apart from the crowd.

Share This

Please Donate

If my how-to tutorials helped you, please consider making a donation. ☕ ☕

chkserv

Need affordable cPanel hosting?

Leave a Reply

Your email address will not be published. Required fields are marked *