JQuery – Play Sound On Hover

One Audio Source:

<!DOCTYPE html>
<html>
<!-- Don't Break My b***s - Gimme Code! Project                                              -->
<!-- Author: Andrea Tonin - http://blog.lucedigitale.com                                     -->
<!-- This code come with absolutely no warranty                                              -->
<!-- If you use this code in your project please give a link to http://blog.lucedigitale.com -->
<!-- Thanks in advance                                                                       -->
<head>
<title>Title</title>

<style type="text/css" media="screen">
#musicHolder {
  border: 1px solid black;
  background-color: yellow;
  padding: 2em;
  width: 50%;
}
</style>

<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script>
$(function(){
$('#musicHolder').hover(
	function() {	$("audio")[0].play();},
	function() {	$("audio")[0].pause();}
	)
});
</script>
</head>
 
<body>

<div id="musicHolder">
1. Mouse IN div to Play Music<br><br>
2. Mouse OUT div to Pause Music<br><br>
3. Mouse IN to Resume Music
<!-- Make an invisible audio tag (without controls, no autoplay) and preload it -->
<audio preload="auto">
  <source src="http://www.lucedigitale.com/blog/wp-content/uploads/2013/07/danosongs_001.mp3" type="audio/mpeg">
  <source src="http://www.lucedigitale.com/blog/wp-content/uploads/2013/07/danosongs_001.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>
</div>

</body>
 
</html>
DEMO

 

Multiple Audio Sources:

<!DOCTYPE html>
<html>
<!-- Don't Break My b***s - Gimme Code! Project                                              -->
<!-- Author: Andrea Tonin - http://blog.lucedigitale.com                                     -->
<!-- This code come with absolutely no warranty                                              -->
<!-- If you use this code in your project please give a link to http://blog.lucedigitale.com -->
<!-- Thanks in advance                                                                       -->
<head>
<title>JQuery - Play Sound On Hover</title>

<style type="text/css" media="screen">
.musical-container {
  border: 1px solid black;
  background-color: green;
  padding: 2em;
}
.musicHolder {
  border: 1px solid black;
  background-color: yellow;
  padding: 2em;
  width: 300px;
  vertical-align: top;
}
img {
  width: 100px;
  height: 100px;
}
</style>

<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script>
$(function(){
		$('.musical-container img').hover(
			function() { 
				$(this).prev()[0].play()
			},
			function() { 
				$(this).prev()[0].pause()
			}
		)
	})
</script>
</head>
 
<body>
<div class="musical-container">

<div class="musicHolder">
Mouse over Image to play Music 1
<!-- Make an invisible audio tag (without controls, no autoplay) and preload it -->
<audio preload="auto">
  <source src="http://www.lucedigitale.com/blog/wp-content/uploads/2013/07/danosongs_001.mp3" type="audio/mpeg">
  <source src="http://www.lucedigitale.com/blog/wp-content/uploads/2013/07/danosongs_001.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>

<img src="http://www.lucedigitale.com/blog/wp-content/uploads/2013/07/audio.png">
</div>
<br><br>
<div class="musicHolder">
Mouse over Image to play Music 2
<!-- Make an invisible audio tag (without controls, no autoplay) and preload it -->
<audio preload="auto">
  <source src="http://www.lucedigitale.com/blog/wp-content/uploads/2013/07/danosongs_002.mp3" type="audio/mpeg">
  <source src="http://www.lucedigitale.com/blog/wp-content/uploads/2013/07/danosongs_002.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>

<img src="http://www.lucedigitale.com/blog/wp-content/uploads/2013/07/audio.png">
</div>

</body>
 
</html>
DEMO

 

My official WebSite >