Webwork
/
jQuery Sound

jQuery: Play Sound on Hover

Using jQuery libraries, it is possible to achieve better control of sound files than with CSS alone.

Bass Drum
Snare
Percussion



Source:
<!-- THIS GOES WHERE YOU WANT SOUND TRIGGER TO OCCUR: -->
<div id="decline">Check Performance</div>

<!-- THIS GOES JUST ABOVE THE CLOSING BODY TAG AT THE BOTTOM OF YOUR PAGE: -->
<audio id="decline_performance" preload="auto">
<source src="audio/decline.mp3"></source>
<source src="audio/decline.ogg"></source>
This browser does not support the HTML5 audio tag.
</audio>
<script>
var declinePerformance = $("#decline_performance")[0];
$("#decline")
.mousedown(function() {
declinePerformance.play();
});
</script>
Web page:
Check Performance



Source:
<!-- THIS GOES WHERE YOU WANT SOUND TRIGGER TO OCCUR: -->
<div id="shutdown">Shutdown Engaged</div>

<!-- THIS GOES JUST ABOVE THE CLOSING BODY TAG AT THE BOTTOM OF YOUR PAGE: -->
<audio id="shutdown_engaged" preload="auto">
<source src="audio/shutdown.mp3"></source>
<source src="audio/shutdown.ogg"></source>
This browser does not support the HTML5 audio tag.
</audio>
<script>
var shutdownEngaged = $("#shutdown_engaged")[0];
$("#shutdown")
.mouseenter(function() {
shutdownEngaged.play();
});
</script>
Web page:
Shutdown Engaged



Previous | Webwork Table of Contents | Next >