因工作需要，要做一个网页播放器，使用了jplayer，用jplayer的好处是基本不用考虑兼容了，demo样式也很全面。
这个播放器功能包含：
①不能播放的音频自动跳过
②记录播放次数
③记录历史位置，下次打开播放列表准确定位历史播放位置
jplayer下载页面：http://www.jplayer.org/
官网有很全面的demo了，我就是直接用的官方demo改的播放列表。demo里面能看到的不详解，主要是记录一下demo里面看不到的，免得下次又踩坑。
jplayer播放器的回调有基础的几种：
error:出错后回调
play：点击播放后回调
pause：暂停后回调
volumechange：声音改变后回调
ended：播放结束后回调
不能播放的音频自动跳过，在播放器出错的回调函数中直接跳到下一首就行。
记录播放次数，可以在点击播放后的回调函数里进行相应操作。
$(document).ready(function(){
var musicPlayList = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer",
cssSelectorAncestor: "#jp_container"
}, {$jsons}, {
play: function(event) {
//console.log(event.jPlayer.status.media.id);
$.ajax({
dataType: 'json',
type: 'POST',
url: "计算播放次数的接口",
data: {
id: event.jPlayer.status.media.id,
type: event.jPlayer.status.media.type,
model:"music_type"
},
success: function (data) {}
});
},
error:function(event){
$(".jp-next").trigger("click");
},
swfPath: "jplayer",
supplied: "mp3,oga",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true
});
musicPlayList.play(历史播放位置);
});
顺带一提，如果是单纯做个音乐播放器的话，supplied里面不能填mp4，填了会出来一个video的黑框的。
jPlayer支持MP3、MP4、OGA等多种格式，和很多插件一样，数据使用json格式。从数据库获取歌单列表后，在后端将数据拼接成json（前端拼其实更好，但容易长度过长出现问题，还是后端拼算了），在拼接这一步操作里面，trans_ext()函数的作用是获取url的后缀名，根据后缀名判断文件格式，然后使用相应的格式来播放音频。官方要求的json里面并不包含id（歌曲ID）和music_type（歌曲类型），但是把其他字段拼到json里面他也能运行，所以我把它们也拼进去，方便完成后续的功能。
//操作缓存，获取历史歌曲所在位置
$__play_location = cache('musicpush.play_location'); //上次播放的位置
$history_temp = $history_location = 0;
//拼接json
$jsons = '[';
foreach($list as $k => $val){
//过滤掉不合法的格式
$trans_ext = $this->model->trans_ext($val['music_url']);
if($trans_ext !== false){
$jsons .= '{title:"'.$val['title'].'",'.$trans_ext.':"'.$val['music_url'].'",id:"'.$val['id'].'",type:"'.$val['music_type'].'"},';
if($val['id'] != $play_location){
$history_temp++;
}else{
//记录位置
$history_location = $history_temp;
}
}
}
$jsons .= ']';
拼接json的时候我也顺便获取了历史播放位置。
jplayer播放器还有一些别的函数可以操作，我只列出我用过的：
//向列表中添加歌曲
musicPlayList.add({title:title,mp3:url});
//播放列表中的指定歌曲
musicPlayList.play(1); //播放第二首
上面代码中的musicPlayList.play()就是用来实现记录历史播放功能，从指定位置开始播放的。
到此，需要的功能都完成了。
我网页中还有单独听一首歌的功能，这个功能用处不大，我直接用audio标签做了。
//监听播放开始
this.addEventListener('play',function(){
$.ajax({
dataType: 'json',
type: 'POST',
url: "播放次数+1的接口",
data: {
id: data.rows[index].id,//json特意拼进去的歌曲ID
type:data.rows[index].type//特意拼进去的歌曲类型
},
success: function (e) {
//前端样式变化 歌曲播放数量+1
var i = parseInt($(".listen_times_"+data.rows[index].id).text()) + 1;
$(".listen_times_"+data.rows[index].id).text(i);
}
});
});