Membuat link atau tautan mengeluarkan effek suara saat di sentuh atau di klik
Membuat link mengeluarkan suara, Link akan mengeluarkan suara (sound) saat di cursor (hover link with sound), atau juga Link mengeluarkan suara saat di klik (click link with sound). Untuk efek suara menggunakan file seperti, mp3 (audio mp3),mp4 (audio mp4),ogg(audio ogg),wav (audio wav).
Anda bisa membuat Effek suara tersebut di setiap Link / Tautan atau juga Link / Tautan terpilh saja.
Mungkin anda bingung cara membuatnya seperti apa, langsung saja menuju demonya.
Untuk demonya silahkan klik tombol di bawah ini
( Catatan : Pastikan Speaker Computer / Headset sobat aktif agar dapat mendengarkan Demonya )
Demo ( Dengarkan! )
Untuk membuat link atau tautan mengeluarkan effek suara saat di sentuh atau di klik atau juga saat di sentuh dan di klik mengeluarkan suara perhatikan TUTORIAL DI BAWAH INI!
LANGKAH 1 : Siapkan file sound/musik yang sobat inginkan! sobat bisa menggunakan file dengan format ".MP3, MP4, OGG, WAV"
Pada tutorial ini saya menggunakan file sound/musik MP3 dari SoundBible.com. kalau anda memiliki link MP3 lain yang anda suka bisa di ganti dengan sound/music anda sendiri, Berikut URL-nya :
http://soundbible.com/mp3/Click2-Sebastian-759472264.mp3
LANGKAH 2 : Pastikan sobat sudah memasang jQuery Library pada blog sobat untuk menerapkan plugin ini di semua Link dan Tautan . silahkan simpan kode berikut sebelum tag </head> pada halaman "Edit Template", Bila anda kesulitan untuk mencarinya tekan ctrl + f lalu isikan dengan </head> setelah itu enter. Letakan sebelum kode </head> .
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Pemasangan jQuery Library hanya dapat dilakukan 1 kali, jika terdapat duplikat jQuery library maka semua efek jQuery tidak akan berfungsi.
LANGKAH 3 : Simpan Settingan Kode HTML & Javascript berikut sebelum tag </body>
<!-- SOUND FX CLICK MeHaday -->
<audio id='klik1' src='http://soundbible.com/mp3/Click2-Sebastian-759472264.mp3'/>
<script>
// <![CDATA[
function klik1() {
var audio = document.getElementById('klik1');
audio.play();
}
// SoundFX Global Tag!
$(document).ready(function(){
$("a, button").attr("onclick", "klik1()");
});
//]]></script>
<!-- #SOUND FX CLICK MeHaday -->
Save lalu lihat hasilnya.
Untuk Effek suara Link / Tautan yang terpilih aja
Caranya cukup hampir sama seperti halnya di atas, Letakan kode Javascript di bawah ini sebelum kode </head>.
<script src='https://sites.google.com/site/filemehaday/filemehaday/sound.js' type='text/javascript'/>
Kode script diatas adalah kode script yang sudah siap pakai jika sobat ingin mengeditnya silahkan menggunakkan kode dibawah ini kemudia upload menjadi file js
function createsoundbite(e){var t=document.createElement("audio");if(t.canPlayType){for(var n=0;n<arguments.length;n++){var r=document.createElement("source");r.setAttribute("src",arguments[n]);if(arguments[n].match(/\.(\w+)$/i))r.setAttribute("type",html5_audiotypes[RegExp.$1]);t.appendChild(r)}t.load();t.playclip=function(){t.pause();t.currentTime=0;t.play()};return t}else{return{playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}}}var html5_audiotypes={mp3:"audio/mpeg",mp4:"audio/mp4",ogg:"audio/ogg",wav:"audio/wav"};var mouseoversound=createsoundbite("http://URL/hoversound.ogg");var clicksound=createsoundbite("http://soundbible.com/mp3/Click2-Sebastian-759472264.mp3");
sebelum mengupload menjadi file jsnya silahkan sobat mengganti file sound di antaranya :
http://URL/hoversound.ogg
http://soundbible.com/mp3/Click2-Sebastian-759472264.mp3
Link di atas tersebut adalah link suara yang berada di Javascript di atas anda bisa mengantinya dengan suara effek kesukaan anda.
Letakan script di bawah ini di tempat Link atau Tautan yang anda pilih untuk menghasilakn suara effek.
1. Script Link atau Tautan di sentuh bersuara
<a href="URL Disini" onmouseover="mouseoversound.playclip()">Teks untuk HOVER LINK WITH SOUND</a>
2. Script Link atau Tautan di klik bersuara
<a href="URL Disini" onclick="clicksound.playclip()">Teks untuk CLICK LINK WITH SOUND</a>
3. Script Link atau Tautan di sentuh dan di klik bersuara
<a href="URL Disini" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">Teks untuk CLICK & HOVER LINK WITH SOUND</a>Simpan dan lihat hasilnya, Bila ada pertanyaan bisa langsung bertanya di kolam komentar.
0 Comments
EmoticonEmoticon