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:
Increase Engagement:
Set the Tone
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>
- 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.
- 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.
