Selamat Datang

Membuat Menu Bersuara Dengan HTML5 Audio

Membuat menu bersuara atau ada efek suara nya ketika mouse hover dengan menggunakan HTML5 Audio adalah bahasan kita kali ini.

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.
html5 audio menu
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

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 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 ID soundBeep 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();
	});

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-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.

DEMO | Download Code

Sekian tutorial kali ini, semoga berguna, dan menginspirasi anda untuk belajar HTML5 lebih dalam lagi.

Salam Web Design & Development Indonesia





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

9 thoughts on “Membuat Menu Bersuara Dengan HTML5 Audio

  1. prasperkasa says:

    gan file beep.ogg itu buat apa ya dan dari mana file tersebut muncul ?? trims :)

  2. dhani27 says:

    wahhhh bolehhh juga nichhh

    sukses ajh dach gan

  3. Wildan MR says:

    Mas kalo pengen digabungin sama effect before unload gimana ya? jadi kita mau pindah kehalaman lain , tapi ada effect suara , kalo pake grafis / gambar loading sih bisa, namun dengan suara belum bisa . Di website saya Disini

    • Belum pernahnyoba, tapi kalau bisa loading gambar ya berarti untuk itu bisa juga, tinggal ganti tag gambarnya dengan suara yang ingin dimainkan, tinggal pake autoplay

  4. jamal cyber says:

    mas mw tanya cara masukin artikelnya ke databasenya gmna caranya

  5. CIDOME says:

    Terima kasih atas infonya, sangant bermanfaat khususnya saya pribadi,
    ditunggu ya ! KUNUNGAN BALIKNYA ” http://cidome.blogspot.com

  6. iymam cmd says:

    wahhh infonya menarik sekali tp boleh nanya cara membuat suara di halaman webnya …
    #bkan di menu

  7. Agen QQ says:

    gan, kalau mau buat suara mp3 main kalau ada update database bisa ga? mau buat situs admin seperti itu

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development