www.riofumioru.com - Hai, Guys! Hari ini saya mau posting tutorial. Dan tutorialnya adalah TUTORIAL MEMBUAT MENU BERSUARA DENGAN HTML5 AUDIO. Sipp..
ABOUT HTML5 - HTML5 adalah HTML yang paling mudah menurut saya. Search Engine juga bisa mengidentifikasi blog/ web dengan mudah.
OK, langsung! ;-) Siapkan bahan- bahannya dan jangan lupa juga alatnya! #masaknih
- Jquery
- File suara (bisa diambil di Soundible)
- Gambar background
- Jaringan yang super full
HTML Code :
<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/">Takoy aki_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 menyelipkan kode soundbeep.
Javascript/ Jquery
var soundBeep = $("#soundBeep")[0];
$("nav a").hover(function() {
soundBeep.play();
}, function(){
soundBeep.pause();
});
Kode diatas disalin lalu dipaste sebelum tag /body
CSS
Untuk background
body{
background: url(robot.jpg);
background-size: cover;
}
Untuk menu
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! :') Bagi yang ingin liat silahkan klik tombol dibawah ini!
