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
Freestyle Logo

Font Size

+

-

Reset

Back to list of all examples

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.

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


<script type="text/javascript" src="http://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

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