Play and stop music in HTML using jPlayer
In this article, I had explained how to play and stop mp3 music using player. I used three javascript files two (jquery.jplayer.min.js, jquery.min.js) for jplayer and one (code.js) contains javascript code to play or stop the music.
Play music in HTML using jPlayer
Jplayer is free open source media library written in javascript. Using jplayer we can play mp3 music and stop the music.
In this article, I had explained how to play and stop mp3 music using player. I used three javascript files two (jquery.jplayer.min.js, jquery.min.js) for jplayer and one (code.js) contains javascript code to play or stop the music.Sample.html file contains the following code.
Here I am given reference to two external javascirpt files jquery.jplayer.min.js, code.js. I used to two html button control to play and stop the music which have onclick event which raises play and stop function of code.js. Here div tag jquery_jplayer_1 is used by the jplayer to play or stop the mp3 song.
<script src="js/jquery.jplayer.min.js" type="text/javascript"></script>
<script src="js/code.js" type="text/javascript"></script>
</head>
<body>
<table align="center">
<tr>
<td>
<b>Sample</b>
</td>
</tr>
<tr>
<td height="30px">
</td>
</tr>
<tr>
<td>
<input type="button" value="Play" onclick="play();"/>
<input type="button" value="Stop" onclick="stop();"/>
<div id="jquery_jplayer_1"></div>
</td>
</tr>
</table>
</body>
</html>Code.js file contains the following code.
function play()
{
//jplayer code to play the mp3 music and stop other instances of the player
$("#jquery_jplayer_1").jPlayer("destroy");
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "song.mp3", //assigning the mp3 file name
}).jPlayer("play"); // auto play
},
ended: function (event) {
$(this).jPlayer("play");
},
swfPath: "swf",
supplied: "mp3"
})
.bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
$(this).jPlayer("pauseOthers");
});
}
function stop()
{
//jplayer code to stop the mp3 music by assign stop string into jPlayer method which div tag of jquery_jplayer_1
$("#jquery_jplayer_1").jPlayer("stop");
}
I had attached the source code for reference.