How to Play Audio on Hover State

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

• How to do Simple Debugging in CSS
• How to Set a Full Page Background Image
• How to create password strength meter
• How to Edit a CSS WordPress File
• How to use First-line Property
• How to Detect Browser With CSS
• How to Transform Text With CSS
• How to Remove the Default li Indent with CSS
• How to Make an Image Bigger when Hovered with CSS
• How to Creat a Simple Navigation Bar in CSS