![]() My original idea for playing with this was a navigation menu that played a little clicking sound while hovering over them. They do it by injecting a new audio element into the DOM everytime that yeti dude is hovered: $("#speak").mouseenter(function()) Trials and Troubles: Overlapping Sounds The teaser page for the Goodfoot mobile app uses a similar technique to play weird groaning noises (via Dave Rupert) when you hover over the yeti dude. So to make this sound begin to play when the mouse hovers over a certain element: var audio = $("#mySoundClip") Let’s use jQuery, just because it’s going to make selecting and dealing with events easier. Var audio = document.getElementById("mySoundClip") To play the sound with JavaScript: var audio = document.getElementsByTagName("audio") Again unfortunately, we can’t tell an element what to do through CSS, so we’ll need JavaScript. Our goal is to have the sound play when the mouse hovers over a certain element, like a menu item. If you want it to play but not be seen, make sure to use the autoplay element ( ). ![]() If you want a little player element, make sure to use the controls attribute ( ). If you insert the code exactly as above into a page, you won’t see or hear anything. Your browser isn't invited for super fun audio time. To get as much browser support as we can, we’ll do it like this with both an MP3 source (WebKit and IE) and an OGG source (Firefox and Opera). ![]() But nobody around here wants to deal with Flash right? So let’s do it with HTML5, which can play sound through its element (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+). To play sounds when the mouse goes over a certain area, we’re going to need to rely on HTML5 or Flash. I’d argue that sounds are part of design and thus the ability to play/trigger it belongs in CSS, but alas, we’re not there yet.
0 Comments
Leave a Reply. |