Html + Javascript Button Hover / Click Alert Sound Effect.

Link to make a blog on the sound, this is a tip to make a link to make a sound, Link will make a sound (sound) when cursor (hover link with sound), or also Link makes a sound when clicked (click link with sound). For sound effects use files such as mp3 (audio mp3), mp4 (audio mp4), ogg (audio ogg), wav (audio wav). The file used is inline Javascript and 2 audio files. For audio files that are used if possible, they must have a small size so as not to overload the loading load.

Preview (demo) Link Use Sound:

[accordion] [item icon="eye" title="DEMO"]1. Hover Link Sound
HOVER LINK WITH SOUND
2. Click Link Sound
CLICK LINK WITH SOUND
3. Hover and Click Link Sound
CLICK & HOVER LINK WITH SOUND

If anyone is interested below is a copy of Javascript, for javascript it can be pasted directly on the blog or also uploaded on web hosting [/item] [/accordion]

Source Code

[lock]
 <script>function createsoundbiteundefinede){var t=document.createElementundefined"audio");ifundefinedt.canPlayType){forundefinedvar n=0;n<arguments.length;n++){var r=document.createElementundefined"source");r.setAttributeundefined"src",arguments[n]);ifundefinedarguments[n].matchundefined/\.undefined\w+)$/i))r.setAttributeundefined"type",html5_audiotypes[RegExp.$1]);t.appendChildundefinedr)}t.loadundefined);t.playclip=functionundefined){t.pauseundefined);t.currentTime=0;t.playundefined)};return t}else{return{playclip:functionundefined){throw new Errorundefined"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=createsoundbiteundefined"https://sites.google.com/site/binkbenk77/hoversound.ogg");var clicksound=createsoundbiteundefined"https://sites.google.com/site/binkbenk77/clicksound.ogg");</script>
1. Hover Link With Sound
<a href="URL" onmouseover="mouseoversound.playclipundefined)">HOVER LINK WITH SOUND</a>
2. Click Link With Sound
<a href="URL" onclick="clicksound.playclipundefined)">CLICK LINK WITH SOUND</a>
[/lock]
[info title="Info" icon="info-circle"] You Can Chane sound url File In JS [/info] Okay, that's all. Tips / How to make Link Alert With Sound, and that can be useful
Any type of information please Contact us.

Button Link Hover/Click Alert Use Sound.

Labels:

Post a Comment

[blogger][facebook][disqus]
switcher
Layout
Boxed Full
Boxed Background Image
Main Color
#007ABE

Shawon Khan

{picture#https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-a3-41YjYcJBZ5a8ARnrIkWEipCX5qC85U1TNiYgbjJtaIFGfVP5tGH2AqJOpDQCpktO4gvGceSGs2mFo8oDGHnw5RQIbSesYA7jEiCfHO8zoYhk3FNcKaXDjxIcSGKc6qL6_HvsmXiri/s50/avatku.jpg} Nor is it at all prudent for the hunter to be over curious touching the precise nature of the whale spout. {facebook#http://facebook.com} {twitter#http://twitter.com} {google#http://google.com} {pinterest#http://pinterest.com} {youtube#http://youtube.com}

Contact Form

Name

Email *

Message *

Powered by Blogger.