audio.player.js音乐播放器（基于soundmanager2 flash API开发）

audio.player.js（内部项目）是一款基于soundmanager2 flash API开发的音乐播放器，采用flash进行播放，界面完全交由用户自己定制。

Usage

// JS
// 歌单
var playlist = [{
    id: 1, // 歌曲id
    name: '米店', // 歌曲名
    singer: '李志', // 歌手
    url: '/test.mp3', // 歌曲url
    type: 'audio/mp3' // 歌曲类型
}];
// 创建播放器
var cp = cafePlayer({
    // 播放器容器id
    container: 'myplayer',
    // 自定义播放器控件按钮
    icons: {
        play: ''
        ...
    },
    // 歌曲播放结束回调函数
    onfinish: function() {},
    // 歌曲加载（缓冲）完毕回调函数
    onload: function() {},
    // 歌曲暂停回调函数
    onpause: function() {},
    // 歌曲开始播放回调函数
    onplay: function() {},
    // 歌曲暂停恢复回调函数
    resume: function() {}
});
// 这里作为基础功能演示，事先清空了session storage中的持久化歌曲列表，
// 因为在实际使用中，add功能只会添加歌曲列表中不存在的歌曲
cp.playlist.storage.clear(cp.id);
// 添加歌曲到播放列表
cp.add(playlist);

以上代码实现了播放器的实例化以及歌曲的添加，下面需要对播放器控件进行初始化。这一步将在soundManager flash API初始化后进行：

soundManager.onready(function() {
    // 当soundManager加载完毕后，初始化播放控件
    cp.initPlugins();
});

运行后，点击播放，结果如下：

播放器默认界面

Plugins

控件是播放器功能扩展的一个重要体现，默认的控件如下：

• 上一首
• 下一首
• 播放/暂停
• 歌曲meta信息（歌曲名，歌手名，当前时间，总时间）
• 循环模式（列表循环，单曲循环，随机循环）
• 音量

Extend plugins

audio.player.js为播放器提供了方便的扩展接口，用户只需要按照约定的模板编写控件，然后将编写好的控件js文件合并入audio.player.js后即可，比如我们扩展了如下控件：

扩展后的播放器示意图如下：

自定义播放器界面

⚠️ Something you need to know first

soundManager {object} 播放器对象，用于各类全局配置
SMSound {object} 声音对象，单首歌曲的声音对象

Params(read only)

• id {string}
  自定义播放器id（随队列长度增加而自增）

• loopType {number}
  循环模式
  1: 列表循环
  2: 单曲循环
  3: 随机循环

• name {string}
  自定义播放器name

• player {object}
  flash播放器信息

• player.flashVersion {number}
  soundManager2 flash播放核心版本

• player.name {string}
  flash播放核心名称（即soundManager2）

• player.version {string}
  soundManager2版本

• playlist {object}
  播放列表

• playlist.items {array}
  播放列表歌曲数组

• playlist.shuffled {boolean}
  播放列表是否已经随机排序的标记

• plugins {object}
  播放器控件对象

• plugins.loop {object}
  循环模式控件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)

/**
 * 创建资源
 * @param  {object} src 歌曲资源
 * @return {object}     SMSound
 */

• createSong(url)

/**
 * 创建歌曲
 * @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的逻辑歌曲列表，用于存储歌曲的逻辑播放顺序。如下所示：

播放列表排序逻辑

可以看到，在执行了下一首next()后，playlist.items中，a被移动到了栈尾，所以，播放器始终播放的是playlist.items栈头的歌曲。

而持久化歌曲列表（即sessionStorage）中的歌曲顺序始终不变。这种机制主要用于在各种的逻辑排序切换的过程中（如列表循环 -> 单曲循环 -> 随机循环 -> 列表循环），或者对歌曲列表的增删操作时，进行两种歌曲列表的比较操作。

Browser compability

✅ IE8+
✅ Chrome
✅ Firefox
❓ 360，猎豹，百度，QQ等其他浏览器