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
Advertisements
I tried it using Chrome version 23, IE 9 and Firefox 17 and I didn’t here any sound
LikeLike
have you move the mouse pointer to the “play sound” span?
LikeLike
Good Job!!! No one can get this right. WP is tricky and I am not a code cutter, but can figure small chunks out. Now i cannot get the text higher up in the page. Still Hover-Roll over sound etc works.
LikeLike
not sure about what u mean but sounds like it works for u.
LikeLike