Ticker

6/recent/ticker-posts

Header Ads Widget

Cara Membuat Efek Suara Ketika Link Diklik/Mouse Hover dengan Html5

Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

Pada postingan ini kita akan membahas bagaimana cara membuat efek pada suara ketika link diklik/mouse hover menggunakan html5, jika sobat berkeinginan untuk membuat efek suara pada link sobat ketika dimouse hover, silahkan simak langkah-langkah dibawah ini.


Langkah Pertama
Download library audio-player.js dan yang lainnya disini, library ini diperlukan untuk memberi efek pada link yang diklik atau dimouse hover.

Langkah Kedua
Ketiklah kode html dibawah ini, simpan dengan nama sound.html, atau terserah dengan nama yang sobat inginkan.

<html>  
<head>  
<title>Sound Effect</title>  
<script type="text/javascript" src="audio-player.js"></script>  
<script>
 var html5_audiotypes={ 
  "mp3": "audio/mpeg",
  "mp4": "audio/mp4",
  "ogg": "audio/ogg",
  "wav": "audio/wav"
 }
 function createsoundbite(sound){
  var html5audio=document.createElement('audio')
  if (html5audio.canPlayType){ //check support for HTML5 audio
  for (var i=0; i<arguments.length; i++){
      var sourceel=document.createElement('source')
      sourceel.setAttribute('src', arguments[i])
      if (arguments[i].match(/\.(\w+)$/i))
       sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
      html5audio.appendChild(sourceel)
  }
  html5audio.load()
  html5audio.playclip=function(){
   html5audio.pause()
   html5audio.currentTime=0
   html5audio.play()
  }
   return html5audio
  }else{
   return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
 }
}
var mouseoversound=createsoundbite("whistle.ogg", "whistle.mp3")
var clicksound=createsoundbite("click.ogg", "click.mp3")
</script>
</head>  
<body>  
<p align="left"><b>Coba klik atau mouse hover link dibawah ini untuk melihat efeknya </b></p>
<p align="left">
<a href="#" onclick="mouseoversound.playclip()">JavaScript Kit</a></p>
<p align="left"><a href="http://www.aguzrybudy.com" onmouseover="mouseoversound.playclip()">Aguzrybudy.com</a></p>
<p align="left"><a href="http://www.aguzrybudy.com" onmouseover="mouseoversound.playclip()">Aguzrybudy.com</a></p>
</body>  
</html>   

Langkah ketiga
Eksekusi atau jalankan script diatas di web browser dan klik atau mouse hover pada salah satu link, maka sobat akan mendengar efek suara ketika diklik ataupun dimouse hover.

Sampai disini dulu tutorial dari saya , Semoga tutorial ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan dan di beri saran untuk source codenya silahkan download dari link dibawah ini.


Post a Comment

0 Comments

Rekomendasi Untuk Anda × +