最近應公司要求需要一個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/（中文版）