At times, clients can be very demanding from you as a
web-developer or programmer and they could ask you to implement some very
powerful formidable functions on their website. Also if you are a music blogger
or entertainment blogger, you may require to be able to play music on your blog
.If also you want to implement a music player on your website as an addition to
the main content then this tutorials is for you.
In this tutorial, we are going to be creating a music player
that will work on all browsers whether they support html5 or not with the power
of j-query, we shall be implementing this functionality. Let us now begin;
1)
We would first follow the normal html rules by
creating a bare bones html document like
we can see below;
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
2)
Now after you have created the above barebones
html document, we will now make use of the empty spaces we have there one after
the other. And our first step is to make a reference call to our j-query file.
Please if you make use of an already hosted j-query like that from google’scdn
servers, our code will still work normally but as an issue of habit as a
programmer, I prefer that all my files reside on the same server which is why,
I would not be using an already hosted version of j-query but rather my own
j-query file hosted on my very own server.
<!doctype html>
<html>
<head>
<script src=”jquery.js”
type=”text/javascript”></script>
</head>
<body>
</body>
</html>
3)
Now once we have made a successful call to
j-query on our server, we would now begin to make use of the various j-query functions required for us to develop these
snippet. Please before I continue, it is important for you to note here that
j-query stores all your html elements and tags in an array that is if you have
three paragraph tags in an html document
you would access them as follows;
$(“p”)[0]- for the first tag
$(“p”)[1]- for the second tag
$(“2”)[2]- for the third tag
And
this is done by j-query, just to make life in coding easier for you with no
stress. So now we are going to go back to our tutorial. So as usual we must
implement the first function in every j-query function which is the usual
document.ready() function;
<!doctype html>
<html>
<head>
<script src=”jquery.js” type=”text/javascript”></script>
<script
type="text/javascript">
$(document).ready(function(){
</head>
<body>
</body>
</html>
4)
Next we would first implement our play button as
follows;
<!doctype html>
<html>
<head>
<script src=”jquery.js” type=”text/javascript”></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#play-button").click(function(){
$("#audioplayer")[0].play();
alert("you have just played the audio
file");
})
</head>
<body>
</body>
</html>
If you look properly, you would see the way
j-query picked our first audioplayer
with the index number [0] and accessed the play method of our first audio
player
5)
Next we would implement our pause button just
like we implemented the play button before.
<!doctype html>
<html>
<head>
<script src=”jquery.js”
type=”text/javascript”></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#play-button").click(function(){
$("#audioplayer")[0].play();
alert("you have just played the audio
file");
})
$("#pause-button").click(function(){
$("#audioplayer")[0].pause();
alert("you have just paused the audio
file");//pauses the audio file
})
</head>
<body>
</body>
</html>
6)
Next we would implement our stop button.
<!doctype html>
<html>
<head>
<script src=”jquery.js”
type=”text/javascript”></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#play-button").click(function(){
$("#audioplayer")[0].play();
alert("you have just played the audio
file");
})
$("#pause-button").click(function(){
$("#audioplayer")[0].pause();
alert("you have just paused the audio
file");//pauses the audio file
})
$("#stop-button").click(function(){
$("#audioplayer")[0].currentTime=0;//returns
the audio file to the beginning
})
</head>
<body>
</body>
</html>
7)
Next we would implement our volume increase
button.
<!doctype html>
<html>
<head>
<script src=”jquery.js”
type=”text/javascript”></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#play-button").click(function(){
$("#audioplayer")[0].play();
alert("you have just played the audio
file");
})
$("#pause-button").click(function(){
$("#audioplayer")[0].pause();
alert("you have just paused the audio
file");//pauses the audio file
})
$("#stop-button").click(function(){
$("#audioplayer")[0].currentTime=0;//returns
the audio file to the beginning
})
$("#volumeup").click(function(){
$("#audioplayer")[0].volume+=0.1;//increases
the volume
})
</head>
<body>
</body>
</html>
8)
Next we would implement our volume reduction
button.
<!doctype html>
<html>
<head>
<script src=”jquery.js”
type=”text/javascript”></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#play-button").click(function(){
$("#audioplayer")[0].play();
alert("you have just played the audio
file");
})
$("#pause-button").click(function(){
$("#audioplayer")[0].pause();
alert("you have just paused the audio
file");//pauses the audio file
})
$("#stop-button").click(function(){
$("#audioplayer")[0].currentTime=0;//returns
the audio file to the beginning
})
$("#volumeup").click(function(){
$("#audioplayer")[0].volume+=0.1;//increases
the volume
})
$("#volumeDown").click(function(){
$("#audioplayer")[0].volume-=0.1;
})
})
</head>
<body>
</body>
</html>
9)
Next we would close our open script tag for legal
html.
<!doctype html>
<html>
<head>
<script src=”jquery.js”
type=”text/javascript”></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#play-button").click(function(){
$("#audioplayer")[0].play();
alert("you have just played the audio
file");
})
$("#pause-button").click(function(){
$("#audioplayer")[0].pause();
alert("you have just paused the audio
file");//pauses the audio file
})
$("#stop-button").click(function(){
$("#audioplayer")[0].currentTime=0;//returns
the audio file to the beginning
})
$("#volumeup").click(function(){
$("#audioplayer")[0].volume+=0.1;//increases
the volume
})
$("#volumeDown").click(function(){
$("#audioplayer")[0].volume-=0.1;
})
})
</script>
</head>
<body>
</body>
</html>
10)
Next we would apply a little css for better
appearance.
<!doctype html>
<html>
<head>
<script src=”jquery.js”
type=”text/javascript”></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#play-button").click(function(){
$("#audioplayer")[0].play();
alert("you have just played the audio
file");
})
$("#pause-button").click(function(){
$("#audioplayer")[0].pause();
alert("you have just paused the audio
file");//pauses the audio file
})
$("#stop-button").click(function(){
$("#audioplayer")[0].currentTime=0;//returns
the audio file to the beginning
})
$("#volumeup").click(function(){
$("#audioplayer")[0].volume+=0.1;//increases
the volume
})
$("#volumeDown").click(function(){
$("#audioplayer")[0].volume-=0.1;
})
})
</script>
<style>
#audioplayer{background-color:orange;
color:yellow;
}
.audioplayer{background-color:orange;
display:block;
width:1000px;
margin-left:200px;
}
#links{background-color:yellow;
display:block;
width:1000px;
margin-left:200px;
}
a{text-decoration:none;
color:red;
align:center;
}
h3{text-align:center;
color:red;
}
</style>
</head>
<body>
</body>
</html>
11)
Ever since we have been implementing all our
code within our head tag so it will not show on the webpage but now we would
now begin implementing our body tag details. Please I am using one of my best
musics named “show us your glory O God” but I renamed it to 2 and it’s an mp3
file so its name is now going to be “2.mp3”.
<!doctype html>
<html>
<head>
<script src=”jquery.js”
type=”text/javascript”></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#play-button").click(function(){
$("#audioplayer")[0].play();
alert("you have just played the audio
file");//plays the audio file
})
$("#pause-button").click(function(){
$("#audioplayer")[0].pause();
alert("you have just paused the audio
file");//pauses the audio file
})
$("#stop-button").click(function(){
$("#audioplayer")[0].currentTime=0;//returns
the audio file to the beginning
})
$("#volumeup").click(function(){
$("#audioplayer")[0].volume+=0.1;//increases
the volume
})
$("#volumeDown").click(function(){
$("#audioplayer")[0].volume-=0.1;//
reduces the volume
})
})
</script>
<style>
#audioplayer{background-color:orange;
color:yellow;
}
.audioplayer{background-color:orange;
display:block;
width:1000px;
margin-left:200px;
}
#links{background-color:yellow;
display:block;
width:1000px;
margin-left:200px;
}
a{text-decoration:none;
color:red;
align:center;
}
h3{text-align:center;
color:red;
}
</style>
</head>
<body>
<h3>Beautiful Jquery Powered Musical
Player</h3>
<div class="audioplayer">
<audio id="audioplayer"
name="audioplayer" controls loop>
<source src="2.mp3"
type="audio/mp3">
Your Browser Does Not Support
TheAudioplayer
</source>
</audio>
</div>
<div id="links">
<a id="play-button"
href="#">Play</a>   
<a id="pause-button"
href="#">Pause</a>   
<a id="stop-button"
href="#">Stop</a>   
<a id="volumeup"
href="#">Increase Volume</a>   
<a id="volumeDown"
href="#">Reduce Volume</a>   
</div>
</body>
</html>
</body>
</html>
12)
Now once you have done the above your audio
player that works on all various browsers is fully ready for use. Your full
code should look like what is shown below for it to work properly.
<!doctype html>
<html>
<head>
<script src="jquery.js"
type="text/javascript"></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#play-button").click(function(){
$("#audioplayer")[0].play();
alert("you have just played the audio
file");
})
$("#pause-button").click(function(){
$("#audioplayer")[0].pause();
alert("you have just paused the audio
file");//pauses the audio file
})
$("#stop-button").click(function(){
$("#audioplayer")[0].currentTime=0;//returns
the audio file to the beginning
})
$("#volumeup").click(function(){
$("#audioplayer")[0].volume+=0.1;//increases
the volume
})
$("#volumeDown").click(function(){
$("#audioplayer")[0].volume-=0.1;
})
})
</script>
<style>
#audioplayer{background-color:orange;
color:yellow;
}
.audioplayer{background-color:orange;
display:block;
width:1000px;
margin-left:200px;
}
#links{background-color:yellow;
display:block;
width:1000px;
margin-left:200px;
}
a{text-decoration:none;
color:red;
align:center;
}
h3{text-align:center;
color:red;
}
</style>
</head>
<body>
<h3>Beautiful Jquery Powered Musical
Player</h3>
<div class="audioplayer">
<audio id="audioplayer"
name="audioplayer" controls loopautoplay>
<source src="2.mp3"
type="audio/mp3">
Your Browser Does Not Support
TheAudioplayer
</source>
</audio>
</div>
<div id="links">
<a id="play-button"
href="#">Play</a>   
<a id="pause-button"
href="#">Pause</a>   
<a id="stop-button"
href="#">Stop</a>   
<a id="volumeup"
href="#">Increase Volume</a>   
<a id="volumeDown"
href="#">Reduce Volume</a>   
</div>
</body>
</html>
0 comments:
Post a Comment