In this article we will discuss to play audio on hover using jQuery. We are going to use HTML5 without flash. We need an audio element with mp3.
Example:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Text effects</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
.nav {
width: 120px;
float: left;
list-style: none;
}
.nav li {
position: relative;
}
.nav a {
display: block;
padding: 20px;
text-decoration: none;
color: white;
background-image: -moz-linear-gradient(bottom, #444444, #999999);
background-image: -o-linear-gradient(bottom, #444444, #999999);
background-image: -webkit-gradient(linear, left top, left bottom, from(#659ECC), to(#194D77));
background-image: -webkit-linear-gradient(bottom, #12456D, #00BCD4);
}
.nav a:hover {
background: #082135;
}
.nav audio {
position: absolute;
left: 110%;
top: 10px;
display: block;
height: 30px;
width: 200px;
}
</style>
</head>
<body>
<section id="one">
<div class="inside">
<h2>One <audio> for all menu items</h2>
<p>play audio on hover the menu </p>
<ul id="nav-one" class="nav">
<li>
<a href="#">Home</a>
<audio id="beep-one" controls="controls" preload="auto">
<source src="audio/beep.mp3">
<source src="audio/beep.ogg">
Your browser isn't invitedfor super fun time.
</audio>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">ContactUs</a></li>
</ul>
<script>varbeepOne = $("#beep-one")[0];
$("#nav-onea")
.mouseenter(function () {
beepOne.play();
});</script>
</div>
</section>
</body>
</html>
Output: