JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

Implementing an SFX when clicking on a button

Click on a button to hear the effect.

Download the example SFXs here.

Create a .mp3 of your music (If not already an mp3 file, use Audio Converter to convert to an mp3) and name it btnClickSFX.mp3

Move the file into you project#/media folder

Here's the code that makes this all work:

Scripts needed (copy and paste inside <head>)


<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/minified.js"></script><!-- only ONE of these on your html page -->
<script type="text/javascript" src="PATHTOYOUR/p#-scripts.js"></script><!-- ADJUST as needed -->

Here's the HTML code


<nav>
<div id="btn1" class="btn">Button 1</div>
<div id="btn2" class="btn">Button 2</div>
<div id="btn3" class="btn">Button 3</div>
<div id="btn4" class="btn">Button 4</div>
</nav>

Here's the CSS - obviously modify as needed


nav {
display:block;
height:50px;
width:800px;
margin:0 auto;
top:0px;
position:relative;
}
.btn {
width:200px;
height:50px;
float:left;
text-align:center;
cursor:pointer;
font-size:3em;
z-index:10;
}
.btn:hover {
color:#F00;
}

Here's the javascript code - Version 1 for JUNIOR Websites


var audioOnClick, btnClicked, url;
//initial audio settings
audioOnClick = document.createElement('audio');//sets variable as an audio type rather than text, number, array, etc.
audioOnClick.setAttribute("src", "project#/media/btnClickSFX.mp3");//locates the audio mp3 file
audioOnClick.load();//auto loads the audio so it's ready to play immediately, i.e. no downloading then playing delay
//actions for when a .btn is clicked
$(".btn").click(function(){
btnClicked = $(this).attr("ID");//gets the id of the clicked button
audioOnClick.play();//this actually plays the SFX
switch (btnClicked) {//switch is like MULTIPLE IF statements
case "btn1"://if btnClicked is btn1
url = "page1.html";//set the url value
break;//now ignore all other cases
case "btn2"://if btnClicked is btn2
url = "page2.html";//
break;
case "btn3":
url = "page3.html";
break;
case "btn4":
url = "page4.html";
break;
case "btn5":
url = "page5.html";
break;
}
var delayTime = audioOnClick.duration*1000;//gets the duration of the SFX so we can delay jumping to the url by that much time
setTimeout(function(){//setTimeout will delay by specified time (delayTime) before executing itself
window.location.href = url;//this will change the browser window to the specified url set above relative to current html page
},delayTime);
});

Here's the javascript code - Version 2 for SENIOR Websites


//initial audio settings
var audioOnClick = document.createElement('audio');//sets variable as an audio type rather than text, number, array, etc.
audioOnClick.setAttribute("src", "project#/media/btnClickSFX.mp3");//locates the audio mp3 file CHANGE THE # to the real PROJECT NUMBER
audioOnClick.load();//auto loads the audio so it's ready to play immediately, i.e. no downloading then playing delay
//actions for when a .btn is clicked
$(".btn").click(function(){/You probably already have this line, so only add the next line to what you already have
audioOnClick.play();//this actually plays the SFX
});