How to add a Sound Hover Effect on my page?

Question

I am working on the Rock Paper Scissors Game. Here is part of my original code without sound effect. I want to add a sound effect on the id of "r","p" & "s" which can play my audio when mouse over those button. I tried the method from other tutorials, but it still can't work. Can anyone help me with this issue. Thanks

HTML

    <div class="choices">
        <div class="choice" id="r">👊</div>
        <div class="choice" id="p">✋</div>
        <div class="choice" id="s">✌️</div>

    <div class="resultAnnounce">
        <p>                </p>

    <div class = "roundCount">  
        <p>                 </p>
    </div>

JS

function main() {
    rock_div.addEventListener('click', function() {
        game('r');
    })

    paper_div.addEventListener('click', function() {
        game('p');
    })

    scissors_div.addEventListener('click', function() {
        game('s');
    })
    
}

main();

Answer 1

This [example][1] here on codepen works fine for me. The trick is to add eventlisteners for mouseover and mouseleave.

hearbeat = document.getElementById('heartbeat')

resetBtn.addEventListener('mouseover', function() {
heartbeat.play();
}, false);

resetBtn.addEventListener('mouseleave', function() {
  heartbeat.pause();
  heartbeat.currentTime = 0;
}, false);

If it doesn't work it may be that your browser doesn't support the audio tag.