最近应公司要求需要一个MP3播放的插件，网上找了很多插件，看来看去还是jPlayer用着最舒服也最容易扩展。所以就找了个资料研究了下，简单做了个小DEMO。支持实时控制列表，常见的播放器功能。
jPlayer中可扩展的强大功能很多，暂时也用不上，等着后来人去发掘了。
废话说完了。进入正题。
插件里就这么多东西。大概分出来之后：
add-on文件夹里是播放列表控制的js文件，里面预设了很多播放和列表控制的方法。
jplayer不用说了，插件的主题。
examples……（这个没人有疑问的我相信这个世界不会是满满的恶意）
lib里是插件本身用到的一些js对象调用，可以不用太过关心，因为如果要改动这个代码才能符合需求的话，建议还是换个插件吧。
skin是皮肤选项，这个很常规了。
以上，其实我们需要关注的地方是add-on里面的东西，开发中需要改，要最多使用的也是这个。
下面是DEMO的核心代码：
HTML头：
<head> <meta http-equiv="Content-Type" charset="utf-8" /> <link href="../../skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../../lib/jquery.min.js"></script> <script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script> <script type="text/javascript" src="../../dist/add-on/jplayer.playlist.js"></script> </head>
需要引用的东西就这几个，所有东西都可以在插件内部文件夹中找到
HTML部分：
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-playlist">
<div class="jp-gui jp-interface">
<div class="jp-controls">
<button class="jp-previous" role="button" tabindex="0">previous</button>
<button class="jp-play" role="button" tabindex="0">play</button>
<button class="jp-next" role="button" tabindex="0">next</button>
<button class="jp-stop" role="button" tabindex="0">stop</button>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-controls">
<button class="jp-mute" role="button" tabindex="0">mute</button>
<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time" role="timer" aria-label="time"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </div>
</div>
<div class="jp-toggles">
<button class="jp-repeat" role="button" tabindex="0">repeat</button>
<button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
</div>
</div>
<div class="jp-playlist">
<ul>
<li> </li>
</ul>
</div>
</div>
</div>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>：这个层是用来装填播放器对象的，播放器本身是需要flash支持的。
<div id="jp_container_1"……：这个层不多说了，就是拼出的控制按钮的样子，播放，暂停等
<div class="jp-playlist">……：这个是用来加载初始化的播放列表的，播放列表的格式写法，稍后会说到。*以上的代码跟官方的DEMO基本一样的，大家也可以从jPlayer官方网站上找到。 JS调用部分：
var JP=new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
{
title:"remix",
mp3:"http://yxz.pengkaikj.com/fjmp/resources/remix.mp3",
oga:"http://yxz.pengkaikj.com/fjmp/resources/remix.ogg"
}
], {
swfPath: "../../dist/jplayer",
supplied: "mp3, oga",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true
});
JS调用时实际上就是初始化一个Jplay的对象。里面的jPlayer是指存放播放器falsh的容器，然后cssSelectorAncestor是控制那些按钮的容器，中括号内是一个json数组，数组内是初始化的播放列表，至于里面存在MP3和oga两个节点的问题，这里是因为jPlayer里在默认检测资源的时候检测这两种的，你可以根据需要修改，修改方式稍后会提到。
到这里你已经可以实现一个最基本的播放器了，不妨试试吧。
最后要说的是jplayer.playlist.js这个文件，他在插件的dist/add-on文件夹内。
_createListItem: function(media) {
var self = this;
var listItem = "<li><div>";
listItem += "<a href=‘javascript:;‘ class=‘remove " + this.options.playlistOptions.removeItemClass + "‘>×</a>";
if(media.free) {
var first = true;
listItem += "<span class=‘" + this.options.playlistOptions.freeGroupClass + "‘>(";
$.each(media, function(property,value) {
if($.jPlayer.prototype.format[property]) {
if(first) {
first = false;
} else {
listItem += " | ";
}
listItem += "<a class=‘" + self.options.playlistOptions.freeItemClass + "‘ href=‘" + value + "‘ tabindex=‘-1‘>" + property + "</a>";
}
});
listItem += ")</span>";
}
listItem += "<a href=‘javascript:;‘ class=‘" + this.options.playlistOptions.itemClass + "‘ tabindex=‘0‘>" + media.title + (media.artist ? " <span class=‘jp-artist‘>by " + media.artist + "</span>" : "") + "</a>";
listItem += "</div></li>";
return listItem;
},
这个是插件中初始化播放列表的代码，代码里是遍历我们刚才说到的json数组，拼接成预设好的html字符串，输出到html中的，所以看官们可以根据需要自行修改。
add: function(media, playNow) {
$(this.cssSelector.playlist + " ul").append(this._createListItem(media)).find("li:last-child").hide().slideDown(this.options.playlistOptions.addTime);
this._updateControls();
this.original.push(media);
this.playlist.push(media);
if(playNow) {
this.play(this.playlist.length - 1);
} else {
if(this.original.length === 1) {
this.select(0);
}
}
},
这个是已经实现的添加音乐的方法，类似的方法有很多，这里不再一一列举，需要的可以自行阅读代码，代码本身很漂亮的哟
这里我实现了一个在html中直接添加音乐的方式，以供参考：
function addMusic(){
var media=new Object();
media={title:"nawm",mp3:"http://yxz.pengkaikj.com/fjmp/resources/nawm.mp3",oga:"http://yxz.pengkaikj.com/fjmp/resources/nawm.ogg"};
JP.add(media,false);
}
JP对象是上文中我们提到的初始化的播放器对象，这里可以直接用播放器对象调用各种方法，里面的参数，第一个media参数要等同于json数组里的一个元素的格式，第二个是用来控制是否马上播放新添加的音乐。
以上就是JP的基础DEMO，与官网的DEMO大同小异。
演示地址：http://yxz.pengkaikj.com/Jplayer/examples/blue.monday/demo-02.htm
官方网站：http://www.jplayer.org/（英文版） http://www.jplayer.cn/（中文版）