How to Play Audio on Hover State

Usually we see highly animated with sound effects websites built in flash. Now with new HTML5 and CSS3 we can create these kinds of effects without flash. Today in our how-section we are going to show you how you can put sounds on hover state of different HTML elements.

Whenever you found a site that plays a sound when we put mouse over menu, you might think that site is built in flash. Flash is the past, nowadays most of the websites are HTML/CSS based and we can create these kind of sounds effects with the help of CSS and HTML. There are certain ways of doing it such as CSS counter strike, play-during, cue-before CSS properties that are for aural style sheets but today i am going to show you a more robust of doing so, that is, with the help of HTML 5. But there is limitation in the way as some browser might not yet fully implemented the HTML 5 but to make sure it cover as much browser support as it can, we will use MP3 source; that is for webkit and Internet Explorer and OGG source; that is for firefox and opera.

HTML

1
2
3
4
5
6
7
8
9
<audio>
<source src="audio/beep.mp3"></source>
<source src="audio/beep.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var audio = document.getElementsByTagName("audio")[0];
audio.play();

// or with an ID

var audio = document.getElementById("mySoundClip");
audio.play();

var audio = $("#mySoundClip")[0];
audio.play();

var audio = $("#mySoundClip")[0];
$("nav a").mouseenter(function() {
audio.play();
});


Related posts

1 Response

By MACasuba

January 29, 2012

Hi, I’m looking for a hoover mouse over sound solution for my menu. Your solutions works on a small test.html sample with HTML5 (in Safari and firefox) but I can’t find a way to embed it into WordPress. It is all PHP, and I don’t know where to put the code. Is it possible? And perhaps you can add a little How To..


Post your response

Copyright © 2010 - 2014 Handy CSS Designed By Anotix, Powered By WordPress, all right reserved.