最近在一网盘项目里烦恼着播放器的问题,经过千辛万苦终于找到一个合适的了,一个Open Source的JS播放器,可以适应多浏览器,太兴奋了,急于与大家分享一下:
地址:http://www.happyworm.com/jquery/jplayer/download.htm
网盘地址:http://u.115.com
下图是播放器的图片,有兴趣的朋友可以上去溜一溜。如果对于网盘里面的JS代码有不明白的地方, 可以随时来发贴。
![](https://images.cnblogs.com/cnblogs_com/Max-Gan/194979/r_M.jpg)
下面本人所写的一个JPlayer 代理类,大家也可以参考一下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
player proxy Code
1![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
var player_proxy = function()
{
2
var _datalist = []; //音乐列表
3
var _btn_obj; //按钮对象
4
var _show_state = -1; //-1:没有音乐 0:正在播入 1:暂停中 2:已停止
5
var _progress_change;
6
var _player;
7
var _play_index = -1; //播放序号
8
var _volume = 50; //默认音量
9
var _play_handler;
10
var _is_no_sound = false;
11
var _play_pattern = 2; //播放模式 0:单曲循环; 1:顺序; 2:循环; 3:随机
12
var _data_change_handler; //单乐数据改变事件
13
14
//根据序号播放歌曲
15![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var play_index = function(index)
{
16![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(_datalist.length > 0)
{
17
var url = _datalist[index]["filepath"];
18
_player.changeAndPlay(url);
19
_play_index = index;
20![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(_play_handler)
{
21
_play_handler(_datalist[index]);
22
}
23
}
24
}
25![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
//播放第一首
27![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var play_first = function()
{
28![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(_datalist.length > 0)
{
29
play_index(0);
30
}
31
}
32
33
//播放下一首
34![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var play_next = function()
{
35
var n = get_play_index_num();
36![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(n < _datalist.length)
{
37
play_index(n);
38
}
39![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
40
play_index(0);
41
}
42
}
43
44
//播放上一首
45![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var play_previous = function()
{
46
var n = get_play_index_num(true);
47![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(n >= 0)
{
48
play_index(n);
49
}
50
}
51
52![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var show_play_btn = function()
{
53
$("#" + _btn_obj["play"]).hide();
54
$("#" + _btn_obj["pause"]).show();
55
$("#" + _btn_obj["stop"]).show();
56
}
57
58![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var show_pause_btn = function()
{
59
$("#" + _btn_obj["play"]).show();
60
$("#" + _btn_obj["pause"]).hide();
61
$("#" + _btn_obj["stop"]).show();
62
}
63
64![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var show_stop_btn = function()
{
65
$("#" + _btn_obj["play"]).show();
66
$("#" + _btn_obj["pause"]).hide();
67
}
68
69
//验证Key是否存在
70![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var check_key = function(key)
{
71![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i = 0; i < _datalist.length;i++)
{
72
var item = _datalist[i];
73![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(item.key == key)
{
74
return true;
75
}
76
}
77
return false;
78
}
79
80![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var get_play_index_num = function(is_pre)
{
81
var i = _play_index;
82![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(is_pre)
{
83![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
switch(_play_pattern)
{
84
case 0:
85
break;
86
case 1:
87
i-=1;
88
break;
89
case 2:
90
i-=1;
91![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(i < 0)
{
92
i = 0;
93
}
94
play_index(i);
95
break;
96
case 3:
97
i = parseInt(Math.random()*(_datalist.length-1));
98
break;
99
}
100
}
101![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
102![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
switch(_play_pattern)
{
103
case 0:
104
break;
105
case 1:
106
i+=1;
107
break;
108
case 2:
109
i+=1;
110![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(i >= _datalist.length)
{
111
i = 0;
112
}
113
play_index(i);
114
break;
115
case 3:
116
i = parseInt(Math.random()*(_datalist.length-1));
117
break;
118
}
119
}
120
return i;
121
}
122
123
//控制静音状态
124![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.control_sound = function(p_has)
{
125![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(p_has == undefined)
{
126
return _is_no_sound;
127
}
128
_is_no_sound = p_has;
129![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(_is_no_sound)
{
130
_player.volume(0);
131![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
132
_player.volume(_volume);
133
}
134
},
135
//播放进度事件
136![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.on_progress_change = function(fun)
{
137![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(_progress_change)
{
138![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_progress_change = function()
{
139
_progress_change();
140
fun();
141
}
142
}
143![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
144
_progress_change = fun;
145
}
146
},
147
//获得正在播放歌曲对象
148![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.get_active_music = function()
{
149![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(_play_index != -1 && _datalist.length > 0)
{
150
return _datalist[_play_index];
151
}
152
return null;
153
},
154
//播放
155![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.play = function(p_key)
{
156![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i = 0; i < _datalist.length; i++)
{
157![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(p_key == _datalist[i].key)
{
158
play_index(i);
159
}
160
}
161
},
162![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.play_first_music = function()
{
163
play_first();
164
},
165
//增加歌曲
166![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.add_data = function(p_key,p_name,p_filepath)
{
167![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var obj =
{key:p_key,filepath:p_filepath,name:p_name};
168
var result_obj = [];
169
var is_add = false;
170![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(!check_key(obj.key))
{
171
_datalist.push(obj);
172
result_obj.push(obj);
173
is_add = true;
174
}
175![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(_data_change_handler)
{
176
_data_change_handler(is_add,result_obj);
177
}
178
},
179
//增加歌曲(批量)
180![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.add_dataarr = function(p_obj_arr)
{
181
var is_add = false;
182
var result_obj = [];
183![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i = 0; i < p_obj_arr.length; i++)
{
184![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(!check_key(p_obj_arr[i].key))
{
185
_datalist.push(p_obj_arr[i]);
186
result_obj.push(p_obj_arr[i]);
187
is_add = true;
188
}
189
}
190![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(_data_change_handler)
{
191
_data_change_handler(is_add,result_obj);
192
}
193
return is_add;
194
},
195
//删除歌曲
196![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.delete_data = function(p_key)
{
197
var index = -1;
198![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i = 0; i < _datalist.length;i++)
{
199
var item = _datalist[i];
200![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(item.key == p_key)
{
201
index = i;
202
}
203
}
204
var key = -1;
205![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(index != -1)
{
206
key = _datalist[index].key;
207![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(_data_change_handler)
{
208![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_data_change_handler(true,[
{key:key}],true);
209
}
210
_datalist.splice(index,1);
211
}
212![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
213![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(_data_change_handler)
{
214![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_data_change_handler(false,
{key:key},true);
215
}
216
}
217
},
218
//绑定按钮
219![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.bind_btn = function(obj)
{
220![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(obj)
{
221
_btn_obj = obj;
222![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$.each(_btn_obj, function(i, n)
{
223
var ele = $("#" + n);
224![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(ele == undefined)
{
225
ele = $(n);
226
}
227![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
ele.click(function()
{
228![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
switch(i)
{
229
case "play": //播放
230
_player.play();
231
show_play_btn();
232
break;
233
case "pause": //暂停
234
_player.pause();
235
show_pause_btn();
236
break;
237
case "stop": //停止
238
_player.stop();
239
show_stop_btn()
240
break;
241
case "pre": //前一首
242
play_previous();
243
show_play_btn();
244
break;
245
case "next": //下一首
246
play_next();
247
show_play_btn();
248
break;
249
}
250
});
251
});
252
}
253
},
254
//设置音量
255![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.set_volume = function(p_num)
{
256![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(p_num == undefined)
{
257
return _volume;
258
}
259
_volume = p_num;
260
_player.volume(_is_no_sound? 0 : _volume);
261
},
262
//设置进度
263![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.set_plan = function(p_num)
{
264
_player.playHead(p_num);
265
},
266
//播放事件
267![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.set_play_call_back = function(p_fun)
{
268
_play_handler = p_fun;
269
},
270
//设置列表改变事件
271![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.set_data_change_handler = function(p_fun)
{
272![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(p_fun)
{
273
_data_change_handler = p_fun;
274
}
275
},
276
//设置播放模式
277![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.pattern = function(p_pattern)
{
278![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(p_pattern == undefined)
{
279
return _play_pattern;
280
}
281
_play_pattern = p_pattern;
282
},
283
//获取列表
284![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.get_datasource = function()
{
285
return _datalist;
286
},
287![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.get_player = function()
{
288
return _player;
289
},
290
//初始化
291![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.init = function(p_playId,p_play_callback)
{
292
_player = $("#" + p_playId);
293![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(p_play_callback)
{
294
_play_handler = p_play_callback;
295
}
296![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(_progress_change)
{
297
_player.onProgressChange(_progress_change);
298
}
299![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_player.onSoundComplete(function()
{
300
var i = get_play_index_num();
301
play_index(i);
302
});
303![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_player.jPlayer(
{
304![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
ready: function ()
{
305![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(_play_index == -1)
{
306
play_first();
307
show_play_btn();
308
}
309![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
310
show_stop_btn();
311
}
312
},
313
swfPath: "xxxxx" //这里是jplayer falsh所在目录
314
});
315
}
316
}
使用方法可以上去115网盘的播放器参考一下,有this在前面是公开的方法,使用过JS的朋友,如何是创建与使用一个类就不用再提了吧。