CODEWITHSUNDEEP
javascripthtml
Anam Siraj
Anam Siraj

Reputation: 1

How do I get audio to play when I hover over an image?

I'am a complete beginner in coding I was just practicing making a simple prank web page for my nephew (its an inside joke of ours) I know the solution might be easy but I cannot figure it out on account of being a beginner and still learning. I want the audio to play when I hover my mouse on the image and to stop playing when my mouse is out how can I modify my code (given below) to do that?. I tried with the onclick event and it worked. Thank you in advance

</head>
<body>
   <script>
       function play(){
           var audio = document. getElementById("audio")
           audio.play();
       }
   </script>
    <img src="moolikeacow.jpg" value="PLAY" onclick="play()">
    <audio id="audio" src="rickroll.mp3"></audio>
</body>

Upvotes: 0

Views: 3969

Answers (3)

Meer Estiyak
Meer Estiyak

Reputation: 11

The First Problem why it doesn't work is that you wrote javaScript top of the html elements as a result javaScript can't grab those elements because those elements are created after javaScript.

Second Problem is You Added The Click event to image so only if you click it will start the audio, not on hover. You should add the mouseover event listener instead of click to make that work.

I just wrote a script that works well as you are looking for and with good comments so you can use or learn how it's working https://gist.github.com/mmestiyak/93b4ee8952337f7847e3aab4f6521174 You Used Inline Event in Image But There is much more things to do with addEventListener method that comes in every element you grab in javaScript. You can give a look at MDN to know more about addEventListener

Here you can see the live version: https://h7qym.csb.app/ hover on the image and just wait for some seconds to see the magic

If Any other things to know please let me know, i enjoy help you

Upvotes: 1

chrwahl
chrwahl

Reputation: 13135

I refactored your code a bit. First of all moving the script element to the end of the document to make sure that all elements are loaded before referring to them. Second I made event listeners for both click, mouseover and mouseout events. I also added a function for stopping the audio.

<body>
  <img id="img" src="moolikeacow.jpg" />
  <audio id="audio" src="rickroll.mp3"></audio>
  <script>
    var audio = document.getElementById("audio");
    var img = document.getElementById("img");
    
    function play() {
      audio.play();
    }
    
    function stop() {
      audio.pause();
    }
    
    img.addEventListener('click', play);
    img.addEventListener('mouseover', play);
    img.addEventListener('mouseout', stop);
  </script>
</body>

Upvotes: 2

Lior Madav
Lior Madav

Reputation: 91

try this:

$('a').hover(function(){
    PlaySound('mySound');// calling playsound function
},function(){
    StopSound('mySound');// calling stopsound function
});

and change your anchor tag like,

<a href="#">Hover Over Me To Play</a>

Upvotes: 0

Related Questions