This is an example which will play a beep sound when the mouse enter an element with the help of HTML5.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var beep = $("#beep")[0];
$("#play").mouseenter(function() {
beep.play();
});
});
</script>
</head>
<body>
<audio id="beep" controls preload="auto">
<source src="music.ogg" type="audio/ogg" />
<source src="music.mp3" type="audio/mp3" />
Your browser isn't invited for super fun audio time.
</audio>
<span id="play">play sound</span>
</body>
</html>
There should be a beep sound when your mouse enter the text play sound.
Please note that you need to have .mp3 and .ogg so that it could work on different browsers. For more info, please refer to
HTML5 – Play sound/music with <audio> tag @ 1
Done =)
Reference: Play Audio on :hover
Filed under: HTML5 Tagged: HTML5, jQuery Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
