Useful Stuff About:

Playing Background Music with Simple Text or Image Controller

You can have background music on your webpage with a simple text controller like this one below. You could change the text for images too if you wish with any image sprite that you create like this one that has 4 different variations in a single .png file (I created these using some premade symbols in Illustrator).

Play Music

or an image button controllers like this

Note: you could just have the play and pause button with no + or - volume control button too

Create both mp3 and ogg files and make them available with HTML5 code.

Create a .mp3 of your music (If not already an mp3 file, use Audio-Converter to convert to an mp3.)
Name the mp3 file with a simple filename such as bgMusic.mp3
Move the mp3 file into your project#/media folder

Make sure to include this line in the head of your html file



<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script type="text/javascript" src="javascriptFile.js"></script><!--adjust this as needed-->

Here's the javascript code to make the buttons work including a gentle fadeIn and fadeOut rather than an abrupt start and stop




    var vol, fadeInAudio, fadeOutAudio, fadeInAudioIncrement, fadeAudioTime;
	vol = 1;//assumes audio volume is initially loud when autoplayed
	if(fadeInAudioIncrement == null) {//in case user doesn't define a default value for fadeInAudioIncrement
		fadeInAudioIncrement = 0.05;//change volume by this amount where 0.05 = 5% change between 0 and 100%
	}
	if(fadeAudioTime == null) {//in case user doesn't define a default value for fadeAudioTime
		fadeAudioTime = 200;//time between each change of volume by fadeInAudioIncrement
	}
	var audioElement =$("bgMusic")[0];//sets variable as an audio type rather than text, number, array, etc. 
	audioElement.load();//auto loads the audio so it's ready to play immediately, i.e. no downloading then playing delay
	function fadeInMusic() {//define actions to fade in music
		vol = audioElement.volume = 0;// set vol to 0 for fadeIn
		audioElement.play();//start playing the audio
		fadeInAudio = setInterval(function() {//define a unique REPEATING function called an INTERVAL
			if (vol < 1.0) {// Increase volume by step as long as it is below 1
				vol += fadeInAudioIncrement;//increase the variable by predefined amount
				audioElement.volume = vol.toFixed(2);// limit to 2 decimal places and change the volume
			} else {
				clearInterval(fadeInAudio);// Stop firing interval when 1 is reached
			}
		}, fadeAudioTime);//fadeAudioTime is the time to wait before firing next repeat of function
	}
	function fadeOutMusic() {//define actions to fade out music
		fadeOutAudio = setInterval(function() {//define a unique REPEATING function called an INTERVAL
			if (vol > 0) {// Increase volume by step as long as it is below 1
				vol -= fadeInAudioIncrement;//increase the variable by predefined amount
				audioElement.volume = vol.toFixed(2);// limit to 2 decimal places and change the volume
			} else {//if the volume is 0 or negative
				audioElement.pause();//now pause the audio
				audioElement.volume = 0;//reset the volume to 0 instead of possibly negative
				clearInterval(fadeOutAudio);// Stop firing interval when 1 is reached
			}
		}, fadeAudioTime);//fadeAudioTime is the time to wait before firing next repeat of function
	}
	$("#playPause").toggle(//toggle cycles through the different functions defined below
		function(){
			fadeInMusic();//calls the function defined below to execute
			$("#playPause").text("Pause Music");//changes the text
		},
		function(){
			fadeOutMusic();//calls the function defined below to execute
			$("#playPause").text("Play Music");//changes the text
		}
	);
	$("#playPause2").toggle(//toggle cycles through the different functions defined below
		function(){
			fadeInMusic();//calls the function defined below to execute
			$("#playPause2").removeClass("paused");// removes class="paused" in html
			$("#playPause2").addClass("playing");// adds class="playing" in html to modify via CSS
		},
		function(){
			fadeOutMusic();//calls the function defined below to execute
			$("#playPause2").removeClass("playing");// removes class="playing" in html
			$("#playPause2").addClass("paused");// adds class="paused" in html to modify via CSS
		}
	);
	//define actions for when the + button is clicked
	$("#volumeControllerPlus").click(function(){
			if(audioElement.volume < 1.00) {//if the volume is not at 100% = 1.00
				audioElement.volume.toFixed(2);// limit to 2 decimal places
				audioElement.volume += fadeInAudioIncrement;//INCREASE volume by defined increment
			} else {//if volume 1.00 or greater
				audioElement.volume = 1.00;//set volume to 100% = 1.00 if possibly over 1.00
			}
	});
	//define actions for when the - button is clicked
	$("#volumeControllerMinus").click(function(){
			if(audioElement.volume > fadeInAudioIncrement) {//if volume is louder than defined increment
				audioElement.volume.toFixed(2);// limit to 2 decimal places
				audioElement.volume -= fadeInAudioIncrement;//DECREASE volume by defined increment
			} else {//if volume is softer than defined increment
				audioElement.volume = 0.00;//set volume to 0 if possibly negative
			}
    });

Here's the HTML code for a TEXT LINK (no images for button) controller for audio



<div id="playPause">Play Music</div>
<audio id="bgMusic"><!-- Note: no controller because text is controlling the audio -->
      <source src="PATHTOYOUR/media/bgMusic.mp3" type="audio/mpeg">
      Your browser does not support HTML5 Audio<!--this displays if neither of the above can be played--> 
</audio>

Here's the HTML code for custom image controller for audio


<div id="imageControllers">
    <div id="playPause2" class="paused"><img src="PATHTOYOUR/images/HTML5_Audio_Buttons.png" width="200" height="50" alt=""/></div>
    <div id="volumeControllerPlus" class="volumeController"><img src="PATHTOYOUR/images/HTML5_Audio_Buttons.png" width="200" height="50" alt=""/></div>
    <div id="volumeControllerMinus" class="volumeController"><img src="PATHTOYOUR/images/HTML5_Audio_Buttons.png" width="200" height="50" alt=""/></div>
</div>
<audio id="bgMusic"><!-- Note: no controller because your custom button is controlling the audio -->
      <source src="bgMusic.mp3" type="audio/mpeg">
      Your browser does not support HTML5 Audio<!--this displays if neither of the above can be played--> 
</audio>

Here's the CSS code



#playPause {
	font-size: 2em;
	text-align: center;
	cursor: pointer;
	color: #00F;
	text-decoration: underline;
}
#imageControllers {
	width: 170px;
	height: 50px;
	margin: 0 auto;
}
#playPause2, .volumeController {
	cursor: pointer;
	width: 50px;
	height: 50px;
	overflow: hidden;
	margin-right: 5px;
	float:left;
}
.paused img {
	margin-left: 0px;
}
.playing img {
	margin-left: -50px;
}
#volumeControllerPlus img {
	margin-left: -100px;
}
#volumeControllerMinus img {
	margin-left: -150px;
}

Main problems for failing

Non-matching filename between code and real audio file
Relative path to real audio/image file is incorrect