Useful Stuff About:

Implementing an SFX when hovering over a button

Hover over a button to hear the effect.

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

Move the file into your project#/media folder.

Here's the code that makes this all work:

Scripts needed (copy and paste inside <head>)


  
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/minified.js"></script><!--only ONE of these on the page-->
<script type="text/javascript" src="PATHTOYOUR/p#-scripts.js"></script><!--adjust this 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


  
var audioOnHover;
//initial audio settings
audioOnHover = document.createElement('audio');//sets variable as an audio type rather than text, number, array, etc.
audioOnHover.setAttribute("src", "project#/media/btnHoverSFX.mp3");//locates the audio mp3 file
audioOnHover.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 hovered over
$(".btn").hover(function(){//if you hover ON the button
   audioOnHover.play();//plays the audio
},function(){//if you hover OFF the button
   audioOnHover.pause();//pauses the audio
   audioOnHover.currentTime=0;//resets back to beginning
});