CODEWITHSUNDEEP
javascriptaudioplaybackonmouseover
AbianG
AbianG

Reputation: 33

JavaScript, playing sound effect in onmouseover event

I suppose its a common question, but none of the tutorials and post I've seen have helped me so far. What I want its a sound to play whenever the cursor is over a menu image which is also a link. There's already another instruction in the onmouseover event for the image to flicker, but I've read that the event can have multiple instructions. Here's the code (sorry if it looks messy)

<html>
<head>
<script type="text/javascript">
  var sonido=document.getElementById("neonclip");
</script>
</head>
<body>
<audio id="neonclip">
   <source src="http://www.eleyte.net/portafolio/neon.mp3" type="audio/mp3"/>
</audio>
<div style="text-align: center; margin-top: 130px;">
<a href="pagelink"> 
<img onmouseover="this.src='img2';
sonido.play(document.getElementById('neonclip'))
onmouseout="this.src='img1'"src="img1"/> </a>
</div>
</body>
</html>

I did this following an example but it didn't work. I know it'll have problems in firefox because it doesnt support mp3 format, but thats another story. Thanks in advance!

Upvotes: 0

Views: 2798

Answers (1)

Pathik Gandhi
Pathik Gandhi

Reputation: 1344

Just user below two format to play sound in all browsers.

<audio preload id="neonclip">
  <source src="sounds/dingdong/57718^DingDong.mp3" type="audio/mpeg">
  <source src="sounds/dingdong/dingdong.ogg" type="audio/ogg">
</audio>

And to play the sound try this

<a href="pagelink"> 
<img onmouseover="this.src='img2'; document.getElementById('neonclip').play()" onmouseout="this.src='img1'"src="img1"/> </a>

Upvotes: 1

Related Questions