How to add sound effects to checkout buttons?

[sao]

Hi! I would like to have a nice short sound when you press for exemple on a product,add to cart,checkout, etc..

[theycallmemakka · Accepted solution]

Hi @sao ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var audio = new Audio();
    audio.src='https://assets.mixkit.co/active_storage/sfx/2997/2997-preview.mp3';
    audio.preload = 'auto';
    
    var clickableElements = document.querySelectorAll('button, a');
    clickableElements.forEach(function(element) {
        element.addEventListener('click', function() {
            audio.play();
        });
    });
});
</script>

If you want to change the sound, do let me know.

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[sao]

Thanks a lot mate! Sincerly ,I have one more post and I see that you re probably pretty good in html/css..Maybe you can help me pls.. And also please tell me if this code will make my speedscore drop too much?

[theycallmemakka]

Hi @sao ,

This code is loaded after the page is loaded, so this will not have that much effect on the page speed.

[sao]

My name is Adrian ,nice to meet you Makka! Mate please I’ll buy you coffees,right now im pretty low, please help me to be sure that my shop is 100% good on his front-end but back-end too

[sao]

I want also to learn better coding..Right now I know some css but not perfectly.. If u can help me with my journey I will appreciate and also will be win-win. I have this business from 3 years,forst time I was using empire theme but I got a big problem so I move the account

[AndresXPER]

This code really helped me!

also is there a way when mouse hovering on clickable Element to make sound effect active? I've been searching for this kind of code for months.

[aabirsarif]

Hello, can you please add this tap music for me? https://pixabay.com/sound-effects/screen-tap-38717/ on this code link? 

[HSN3]

Hi @theycallmemakka 
Can it be done for only checkout and add-to-cart buttons instead of all buttons?