Creating a sound menu or having a sound effect when the mouse hovers using HTML5 Audio is our discussion this time.

In the past we needed to use Flash to create sound effects like this, looking very sophisticated. But now with the presence of HTML5 which is sophisticated enough to make things easier, we don’t need to make it with flash, and we don’t need to also install Flash Player on our computers, flash players like this can also harm computers because they are vulnerable to malware insertion.

For inspiration you can see some websites that are made using HTML5.
html5 audio menu
Okay, straight to the topic, we will make a menu that when the mouse hovers it will make a sound, for that we need some ingredients 🙂 #LikeCookingSaja.

Resources
jquery
Sound files you can find in soundible
Robot pictures for background
HTML
First we create the HTML structure first, write it as below.

Robot HTML5 Audio on Menu

A robot is a mechanical or virtual artificial agent, usually an electro-mechanical machine that is guided by a computer program or electronic circuitry… read more..

It should be seen there that we insert an audio tag with the ID soundBeep, which contains the source file.

You can see an explanation of the Audio tag on the W3 website.

Javascript (Jquery)
We need Jquery to instruct it to play the audio that is in the soundBeep ID when the mouse hovers. The script is as below, and is placed at the end before the /body tag.

var soundBeep = $(“#soundBeep”)[0];
$(“nav a”).hover(function() {
soundBeep.play();
}, function(){
soundBeep.pause();
});
Styling (CSS)
To make it look attractive we beautify it with CSS.

CSS for Robot Background.

body{
background: url(robot.jpg);
background-size: cover;
}

• There we use background-size: cover to make the image full.

For the menu we beautify with the following script.

For those of you who don’t really understand, you can type it yourself and see the results line by line.