Cara Membuat Efek Suara Klik Pada Tautan Dan Tombol Pada Blog 2019

Kali ini saya ingin berbagi tutorial tentang "Cara Membuat Efek Suara Klik Pada Tautan Dan Tombol Pada Blog".

Penasaran seperti apa tutorial tersebut? silahkan coba klik Link dan Tombol Demo di bawah ini!

( Catatan : Pastikan Speaker Computer / Headset sobat aktif agar dapat mendengarkan Demo-nya )

Demo (Dengarkan!)

/ KLIK TAUTAN Buat anda yang pernah membuat aplikasi / animasi mungkin akan tidak asing dengna efek seperti ini. Namun disini saya akan memberitahukan tutorial bagaimana cara menerapkan efek suara / sound effect/fx "Click" ini pada Website atau Blog kita!

Tutorial

Langkah-1 : Siapkan file sound/musik yang sobat inginkan. sobat bisa menggunakan file dengan format ".MP3" karena dalam tutorial ini saya menggunakan tag <audio> dalam HTML5 yang sudah support/dapat membaca file tersebut.

Pada tutorial ini saya menggunakan file sound/musik MP3 dari SoundBible.com. Berikut URL-nya :

http://soundbible.com/mp3/Button_Press_2-Marianne_Gagnon-1415267358.mp3

Langkah-2 : Pastikan sobat sudah memasang jQuery Library pada blog sobat untuk menerapkan plugin ini di semua Tombol & Tautan! Jika belum memasang jQuery Library, silahkan simpan kode berikut sebelum tag </head> pada halaman "Edit Template" :

<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 Terakhir : Simpan Settingan Kode HTML & Javascript berikut setelah tag <body> :

<!-- SOUND FX CLICK By: mixprop.blogspot.com -->
  <audio id='klik1' src='http://soundbible.com/mp3/Button_Press_2-Marianne_Gagnon-1415267358.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 By: mixprop.blogspot.com  -->

Note : Jika Ingin Artikel Ini Tinggal Klik Button Download Yang Telah Disediakan.

Terima Kasih Telah Berkunjung.

#SemogaBermanfaat
#SalamNewbieBlogger