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 >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma