'Play sound on hover

I want to play a sound when the cursor hits an image. I tried to use javascript. the <audio>-tag is working, when I say <audio autoplay> the soundfile is played. See code below.

Plus, I want the sound to be repeated as long as one is hovering.

I used this tutorial: Play Sound on :hover 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
	
  <div id="div4">
    <img class="bottom" src="dcim/20190202_102432 copy.jpg" />
    <img class="top" src="dcim/20190202_102432.jpg" />
    <audio>
      <source src="div4.mp3"></source>
    </audio>
  </div>
		
<script>
var audio = $("#div4.mp3")[0];
$("div4").mouseenter(function() {
audio.play();
});
</script>
		
</body>
javascriptjqueryhtmlcss


Solution 1:[1]

Here is working code:

  1. add id/class to <audio> and select the DOM in script as var audio = $("#audio")[0];
  2. Use <source src="..."/> and NOT <source src="..."></source>
  3. Check if your src works

var audio = $("#audio")[0];
$("#div4").mouseenter(function() {
audio.play();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div4">
    <img class="bottom" src="dcim/20190202_102432 copy.jpg" />
    <img class="top" src="dcim/20190202_102432.jpg" />
    <audio id="audio">
      <source src="https://css-tricks.com/examples/SoundOnHover/audio/beep.ogg"/>
    </audio>
  </div>

EDIT to your comment

1) I want the sound to be repeated as long as one is hovering;

2) I want the sound to stop, when the mouse leaves the image

    var audio = $("#audio")[0];
    $("#div4").mouseenter(function() {
    audio.play();
     audio.loop = true;
    });
    $("#div4").mouseleave(function() {
    audio.pause();
    });
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="div4">
        <img class="bottom" src="dcim/20190202_102432 copy.jpg" />
        <img class="top" src="dcim/20190202_102432.jpg" />
        <audio id="audio">
          <source src="https://css-tricks.com/examples/SoundOnHover/audio/beep.ogg"/>
        </audio>
 </div>

Solution 2:[2]

You need to target the div <div id="div4">:

$("#div4").mouseenter(function() {...});

And your audio should be the audio <audio>:

var audio = $("audio");

Solution 3:[3]

You need to attach an eventListener to the object that should trigger the playback of the audio like so:

            <!DOCTYPE html>
            <html lang="en">
            <head>
              <meta charset="UTF-8">
              <title></title>
            </head>
            <body>
                <div id="div4">
                  <img class="bottom" src="dcim/20190202_1024322.jpg" />
                  <img class="top" src="dcim/20190202_102432.jpg" />
                  <audio id="audio4">
                    <source src="div4.mp3"></source>
                  </audio>
              </div>
              <script>
                var div4 = document.querySelector('#div4') 
                var audio = document.querySelector('#audio4')
                div4.addEventListener("mouseenter", function(){
                  audio.play()
                });
                div4.addEventListener("mouseout", function(){
                  audio.pause()
                });
            </script>
            </body>
            </html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Jack Bashford
Solution 3

Related Questions