(+84) 463.28.7979

jQuery “jPlayer”


Jplayer is a flexible and functional solution to play and control media files in your webpage. It supports HTML5 and outputs flash for browsers that yet do not support HTML 5. Among other advantages is the ability to customize its appearance using HTML and CSS. For more details visit the official website http://www.jplayer.org

JavaScript

We should include jQuery framework and jplayer.min.js by pointing src attribute in the script tag to those .js files.

1
2
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/jplayer.min.js"></script>

Initialization script we place in the section. Define the list of songs in the array myPlayList (line 4-6) Notice, that that you should specify two audio files: mp3 and ogg. You can use any sound conversion tool for that (e.g. http://media.io)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
$(document).ready(function(){
var playItem = 0;
var myPlayList = [
{name:"Black Plant",mp3:"audio/black_plant.mp3",ogg:"audio/black_plant.ogg"},
{name:"Hidden",mp3:"audio/hidden.mp3",ogg:"audio/hidden.ogg"},
{name:"The Separation",mp3:"audio/separation.mp3",ogg:"audio/separation.ogg"}
];
// Local copy of jQuery selectors, for performance.
var jpPlayTime = $("#jplayer_play_time");
var jpTotalTime = $("#jplayer_total_time");
$("#jquery_jplayer").jPlayer({
ready: function() {
displayPlayList();
playListInit(true); // Parameter is a boolean for autoplay.
},
oggSupport: true
})
.jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
jpPlayTime.text($.jPlayer.convertTime(playedTime));
jpTotalTime.text($.jPlayer.convertTime(totalTime));
})
.jPlayer("onSoundComplete", function() {
playListNext();
});
$("#jplayer_previous").click( function() {
playListPrev();
$(this).blur();
return false;
});
$("#jplayer_next").click( function() {
playListNext();
$(this).blur();
return false;
});
function displayPlayList() {
$("#jplayer_playlist ul").empty();
for (i=0; i < myPlayList.length; i++) {
var listItem = (i == myPlayList.length-1) ? "
<lijs plain" style="padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; white-space: pre-wrap !important; border-top-left-radius: 0px 0px !important; border-top-right-radius: 0px 0px !important; border-bottom-right-radius: 0px 0px !important; border-bottom-left-radius: 0px 0px !important; background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; overflow-x: visible !important; overflow-y: visible !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; min-height: inherit !important; color: black !important; background-position: initial initial !important; background-repeat: initial initial !important; ">jplayer_playlist_item_last">" : "
</li><li>";
listItem += "<a href="#" id="jplayer_playlist_item_"+i+"" tabindex="1">"+ myPlayList[i].name +"</a></li>
";
$("#jplayer_playlist ul").append(listItem);
$("#jplayer_playlist_item_"+i).data( "index", i ).click( function() {
var index = $(this).data("index");
if (playItem != index) {
playListChange( index );
} else {
$("#jquery_jplayer").jPlayer("play");
}
$(this).blur();
return false;
});
}
}
function playListInit(autoplay) {
if(autoplay) {
playListChange( playItem );
} else {
playListConfig( playItem );
}
}
function playListConfig( index ) {
$("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current").parent().removeClass("jplayer_playlist_current");
$("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current").parent().addClass("jplayer_playlist_current");
playItem = index;
$("#jquery_jplayer").jPlayer("setFile", myPlayList[playItem].mp3, myPlayList[playItem].ogg);
}
function playListChange( index ) {
playListConfig( index );
$("#jquery_jplayer").jPlayer("play");
}
function playListNext() {
var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
playListChange( index );
}
function playListPrev() {
var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
playListChange( index );
}
});

HTML

Below you can see general HTML script representation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="jquery_jplayer"></div>
<div class="jp-single-player">
<div class="jp-interface">
<ul class="jp-controls">
<li class="first"><a href="#" id="jplayer_play" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" id="jplayer_pause" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="#" id="jplayer_stop" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="#" id="jplayer_volume_min" class="jp-volume-min" tabindex="1">min volume</a></li>
<li class="last"><a href="#" id="jplayer_volume_max" class="jp-volume-max" tabindex="1">max volume</a></li>
</ul>
<div class="jp-progress">
<div id="jplayer_load_bar" class="jp-load-bar">
<div id="jplayer_play_bar" class="jp-play-bar"></div>
</div>
</div>
<div id="jplayer_volume_bar" class="jp-volume-bar">
<div id="jplayer_volume_bar_value" class="jp-volume-bar-value"></div>
</div>
<div id="jplayer_play_time" class="jp-play-time"></div>
<div id="jplayer_total_time" class="jp-total-time"></div>
</div>
<div id="jplayer_playlist" class="jp-playlist">
<ul>
<li class="first last">Bubble</li>
</ul></div>
</div>
CSS
1
&tl;link href="path/to/file/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>