Dahulu kita perlu menggunakan Flash untuk membuat efek suara seperti ini, terlihat sangat canggih. Namun sekarang dengan hadirnya HTML5 yang cukup canggih membuat segalanya menjadi lebih mudah, kita tidak perlu membuatnya dengan flash, dan kita tidak perlu juga menginstall Flash Player di komputer kita, flash player seperti nya juga bisa membahayakan komputer karena rentan untuk disisipi malware.
Untuk inspirasi anda bisa melihat beberapa website yang dibuat dengan menggunakan HTML5.
Oke langsung ke topik, kita akan membuat menu yang ketika mouse hover akan mengeluarkan suara, untuk itu kita membutuhkan beberapa bahan-bahan nya :) #SepertiMemasakSaja.
Resources
- Jquery
- File Suara bisa anda cari di soundible
- Gambar robot untuk background
HTML
Pertama kita membuat struktur HTML terlebih dahulu, tulis seperti dibawah ini.
<header>
<h1>Robot <small>HTML5 Audio on Menu</small></h1>
<p>A robot is a mechanical or virtual artificial agent, usually an electro-mechanical machine that is guided by a computer program or electronic circuitry... <a href="http://en.wikipedia.org/wiki/Robot">read more..</a> </p>
<aside>
<p>
* Demo of using HTML5 Audio on a menu, tutorial by <a href="http://www.tutorial-webdesign.com">Tutorial-webdesign.com</a> |
Follow twitter <a href="http://www.twitter.com/tut_web">@tut_web</a> ,
Image by <a href="http://www.flickr.com/photos/takoyaki_king/8186641411/sizes/l/in/photostream/">Takoyaki_King</a>
</p>
</aside>
</header>
<nav>
<ul>
<li><a href="#">About Robot</a></li>
<li><a href="#">Back to Tutorial</a></li>
<li><a href="#">Download</a></li>
</ul>
<audio id="soundBeep" preload="auto">
<source src="beep.mp3"></source>
<source src="beep.ogg"></source>
</audio>
</nav>
Perlu dilihat disitu kita menyisipkan tag audio dengan ID <h1>Robot <small>HTML5 Audio on Menu</small></h1>
<p>A robot is a mechanical or virtual artificial agent, usually an electro-mechanical machine that is guided by a computer program or electronic circuitry... <a href="http://en.wikipedia.org/wiki/Robot">read more..</a> </p>
<aside>
<p>
* Demo of using HTML5 Audio on a menu, tutorial by <a href="http://www.tutorial-webdesign.com">Tutorial-webdesign.com</a> |
Follow twitter <a href="http://www.twitter.com/tut_web">@tut_web</a> ,
Image by <a href="http://www.flickr.com/photos/takoyaki_king/8186641411/sizes/l/in/photostream/">Takoyaki_King</a>
</p>
</aside>
</header>
<nav>
<ul>
<li><a href="#">About Robot</a></li>
<li><a href="#">Back to Tutorial</a></li>
<li><a href="#">Download</a></li>
</ul>
<audio id="soundBeep" preload="auto">
<source src="beep.mp3"></source>
<source src="beep.ogg"></source>
</audio>
</nav>
soundBeep
, didalamnya berisi source
file nya.Penjelasan tentang tag Audio bisa anda lihat di website W3.
Javascript (Jquery)
Kita membutuhkan Jquery untuk memerintahkan agar memainkan audio yang ada di IDsoundBeep
ketika mouse hover. Script nya seperti dibawah ini, dan diletakan dibagian akhir sebelum tag /body
.
var soundBeep = $("#soundBeep")[0];
$("nav a").hover(function() {
soundBeep.play();
}, function(){
soundBeep.pause();
});
$("nav a").hover(function() {
soundBeep.play();
}, function(){
soundBeep.pause();
});
Styling (CSS)
Agar tampilan menarik kita percantik dengan CSS.CSS untuk Background robot.
body{
background: url(robot.jpg);
background-size: cover;
}
* Disitu kita menggunakan background: url(robot.jpg);
background-size: cover;
}
background-size: cover
untuk membuat gambar jadi full.Untuk menu kita percantik dengan script berikut ini.
Untuk anda yang belum terlalu mengerti bisa mengetik sendiri dan lihat hasilnya baris per baris.
nav{
padding:10px 40px;
width: 400px;
}
nav ul{
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul li {
display: block;
padding: 10px;
}
nav ul li a{
background: transparent;
padding:20px;
display: block;
text-transform: uppercase;
font-size: 20px;
font-style: italic;
color: #ddd;
border-radius: 6px 0 0 6px;
}
nav ul li a:hover{
background: -webkit-linear-gradient(left, rgba(248,207,119, .4), transparent);
background: -moz-linear-gradient(left, rgba(248,207,119, .4), transparent);
background: -o-linear-gradient(left, rgba(248,207,119, .4), transparent);
background: -ms-linear-gradient(left, rgba(248,207,119, .4), transparent);
background: linear-gradient(left, rgba(248,207,119, .4), transparent);
}
Selesai, berikut adalah hasilnya.padding:10px 40px;
width: 400px;
}
nav ul{
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul li {
display: block;
padding: 10px;
}
nav ul li a{
background: transparent;
padding:20px;
display: block;
text-transform: uppercase;
font-size: 20px;
font-style: italic;
color: #ddd;
border-radius: 6px 0 0 6px;
}
nav ul li a:hover{
background: -webkit-linear-gradient(left, rgba(248,207,119, .4), transparent);
background: -moz-linear-gradient(left, rgba(248,207,119, .4), transparent);
background: -o-linear-gradient(left, rgba(248,207,119, .4), transparent);
background: -ms-linear-gradient(left, rgba(248,207,119, .4), transparent);
background: linear-gradient(left, rgba(248,207,119, .4), transparent);
}
DEMO | Download Code
Sekian tutorial kali ini, semoga berguna, dan menginspirasi anda untuk belajar HTML5 lebih dalam lagi.Sumber : http://www.tutorial-webdesign.com