audio.player.js（內(nèi)部項目）是一款基于soundmanager2 flash API開發(fā)的音樂播放器，采用flash進行播放，界面完全交由用戶自己定制。
Usage
<!-- 引入資源文件 -->
<!-- 樣式表 -->
<link rel="stylesheet" href="/audio.player.css">
<!-- 依賴庫 -->
<script src="/jquery.js"></script>
<script src="/lodash.js"></script>
<!-- 核心庫 -->
<script src="/audio.player.js"></script>
<!-- HTML -->
<!-- 播放器容器 -->
<div id="myplayer"></div>
// JS
// 歌單
var playlist = [{
id: 1, // 歌曲id
name: '米店', // 歌曲名
singer: '李志', // 歌手
url: '/test.mp3', // 歌曲url
type: 'audio/mp3' // 歌曲類型
}];
// 創(chuàng)建播放器
var cp = cafePlayer({
// 播放器容器id
container: 'myplayer',
// 自定義播放器控件按鈕
icons: {
play: '<i class="cf cf-play-o"></i>'
...
},
// 歌曲播放結束回調(diào)函數(shù)
onfinish: function() {},
// 歌曲加載（緩沖）完畢回調(diào)函數(shù)
onload: function() {},
// 歌曲暫停回調(diào)函數(shù)
onpause: function() {},
// 歌曲開始播放回調(diào)函數(shù)
onplay: function() {},
// 歌曲暫停恢復回調(diào)函數(shù)
resume: function() {}
});
// 這里作為基礎功能演示，事先清空了session storage中的持久化歌曲列表，
// 因為在實際使用中，add功能只會添加歌曲列表中不存在的歌曲
cp.playlist.storage.clear(cp.id);
// 添加歌曲到播放列表
cp.add(playlist);
以上代碼實現(xiàn)了播放器的實例化以及歌曲的添加，下面需要對播放器控件進行初始化。這一步將在soundManager flash API初始化后進行：
soundManager.onready(function() {
// 當soundManager加載完畢后，初始化播放控件
cp.initPlugins();
});
運行后，點擊播放，結果如下：
Plugins
控件是播放器功能擴展的一個重要體現(xiàn)，默認的控件如下：
- 上一首
- 下一首
- 播放/暫停
- 歌曲meta信息（歌曲名，歌手名，當前時間，總時間）
- 循環(huán)模式（列表循環(huán)，單曲循環(huán)，隨機循環(huán)）
- 音量
Extend plugins
audio.player.js為播放器提供了方便的擴展接口，用戶只需要按照約定的模板編寫控件，然后將編寫好的控件js文件合并入audio.player.js后即可，比如我們擴展了如下控件：
<!-- 核心庫 -->
<script src="/static/js/audio.player.js"></script>
<!-- 播放列表 -->
<script src="/static/js/player-plugin-playlist.js"></script>
<!-- 下載 -->
<script src="/static/js/player-plugin-download.js"></script>
<!-- 點歌 -->
<script src="/static/js/player-plugin-request.js"></script>
擴展后的播放器示意圖如下：
?? Something you need to know first
soundManager {object}播放器對象，用于各類全局配置
SMSound {object}聲音對象，單首歌曲的聲音對象
Params(read only)
id {string}
自定義播放器id（隨隊列長度增加而自增）loopType {number}
循環(huán)模式
1: 列表循環(huán)
2: 單曲循環(huán)
3: 隨機循環(huán)name {string}
自定義播放器nameplayer {object}
flash播放器信息player.flashVersion {number}
soundManager2 flash播放核心版本player.name {string}
flash播放核心名稱（即soundManager2）player.version {string}
soundManager2版本playlist {object}
播放列表playlist.items {array}
播放列表歌曲數(shù)組playlist.shuffled {boolean}
播放列表是否已經(jīng)隨機排序的標記plugins {object}
播放器控件對象plugins.loop {object}
循環(huán)模式控件jquery對象plugins.meta {object}
meta信息控件jquery對象plugins.next {object}
下一首控件jquery對象plugins.playpause {object}
播放/暫停控件jquery對象plugins.prev {object}
上一首控件jquery對象plugins.progressbar {object}
播放時間進度條控件jquery對象plugins.volume {object}
音量控件jquery對象song {SMSound}
Methods
add(src, now)
/**
* 添加歌曲到播放列表
* @param {(object|object[])} src 歌曲資源
* @param {boolean} now 是否添加歌曲后立即播放，默認false
* @return {array} 播放列表
*/
create(src)
/**
* 創(chuàng)建資源
* @param {object} src 歌曲資源
* @return {object} SMSound
*/
createSong(url)
/**
* 創(chuàng)建歌曲
* @param {string} url 歌曲地址
* @return {object} SMSound
*/
del(sId)
/**
* 從播放列表中刪除歌曲
* @param {(number|number[])} sId 歌曲資源id
* @return {array} 播放列表
*/
initPlugins()
/**
* 初始化播放器控件
* @return {object} 控件對象
*/
load(src)
/**
* 裝載歌曲
* @param {object} src 歌曲資源
* @return {object} SMSound
*/
next()
/**
* 下一首
* @return {object} 下一首歌曲資源
*/
pause(song)
/**
* 暫停正在播放的歌曲
* @param {object} song SMSound
* @return {object} SMSound
*/
play(song)
/**
* 播放已裝載歌曲
* @param {object} song SMSound
* @return {object} SMSound
*/
playlist.reset(src)
/**
* 重置播放列表：
* 1、以當前第一首歌為首，以此進行順序排序
* 2、以傳入的src歌曲為首，以此進行截斷排序（即維持原順序，無論是列表還是隨機）
* @param {object} src 歌曲資源
* @return {array} 播放列表
*/
playlist.resetAll()
/**
* 播放列表按照歌曲添加順序整個排序
* 例如，
* 重置前：[b,d,a,c,e,g,f]
* 重置后：[a,b,c,d,e,f,g]
*/
playlist.shuffle()
/**
* 播放列表隨機排序
*/
playlist.storage.clear(id)
/**
* 清空持久化播放列表
* @param {string} id 播放器id
* @return {array} 播放列表
*/
playlist.storage.get(id)
/**
* 獲取持久化播放列表
* @param {string} id 播放器id
* @return {array} 播放列表
*/
playlist.storage.set(id, playlist)
/**
* 播放列表持久化存儲
* @param {string} id 播放器id
* @param {array} playlist 播放列表
* @return {array} 播放列表
*/
playlist.storage.update(playlist)
/**
* 更新持久化播放列表
* @param {array} playlist 播放列表
* @return {array} 播放列表
*/
prev()
/**
* 上一首
* @return {object} 上一首歌曲資源
*/
resume(song)
/**
* 恢復已暫停的歌曲
* @param {object} song SMSound
* @return {object} SMSound
*/
stop(song)
/**
* 停止正在播放的歌曲（將重置時間軸為0）
* @param {object} song SMSound
* @return {object} SMSound
*/
unload(song)
/**
* 卸載歌曲
* 該方法不僅會停止播放當前歌曲，還會取消當前的任何HTTP請求
* @param {object} song SMSound
* @return {object} SMSound
*/
Session storage
audio.player.js采用session storage來存儲持久化歌曲列表，持久化歌曲列表始終與UI界面中的歌曲列表相同，即是說持久化歌曲列表，無論是對其增加或者減少歌曲，始終會與UI界面同步更新，保持一致。
playlist.items
playlist.items是audio.player.js的邏輯歌曲列表，用于存儲歌曲的邏輯播放順序。如下所示：
可以看到，在執(zhí)行了下一首next()后，playlist.items中，a被移動到了棧尾，所以，播放器始終播放的是playlist.items棧頭的歌曲。
而持久化歌曲列表（即sessionStorage）中的歌曲順序始終不變。這種機制主要用于在各種的邏輯排序切換的過程中（如列表循環(huán) -> 單曲循環(huán) -> 隨機循環(huán) -> 列表循環(huán)），或者對歌曲列表的增刪操作時，進行兩種歌曲列表的比較操作。
Browser compability
? IE8+
? Chrome
? Firefox
? 360，獵豹，百度，QQ等其他瀏覽器
