纯JS打造，功能强大、使用简单、扩展性强、能同时兼容IE、firefox和傲游浏览器的网页播放器。
使用前提条件：电脑上要装有Media player；
原理：通过jquery控制Media player，使用extjs的solider完成播放进度条、声音进度条的控制；
本插件优点：
1、申明对象简单：使用面向对象的思想编写。直接new Player()对象就创建了一个播放器；
2、使用JSON格式传初始化参数；
3、支持AJAX动态读取歌曲列表；
4、播放器界面由你自由定制；
5、支持歌词同步显示；
6、可自动从网络上获取歌词；
7、播放时间进度条、声音进度条可自由控制；
8、支持歌曲列表排序；
1、参数说明：
autoStart - 是否自动播放:true（或1) - 是，false(或0) - 否，默认false;
loop - 是否循环播放：true（或1) - 是，false(或0) - 否，默认true
playCount - 播放次数：0-不限，默认1
volume - 初始音量：取值范围0-100，默认80
xmlUrl - 歌曲列表xml文件
stateWrapper - 显示播放状态的容器ID,不输入时不显示
pauseBtn - '播放/暂停'按钮ID（播放与暂停在同一个按钮上时用）
pauseCls - 暂停状态时'播放/暂停'按钮样式（播放与暂停在同一个按钮上时用）
playCls - 播放状态时'播放/暂停'按钮样式（播放与暂停在同一个按钮上时用）
tipCls - 正在播放歌曲的样式（高亮显示正在播放的歌曲时用）
volWrapper - 显示音量控制条的容器ID,不输入时不显示音量
rateWrapper - 显示播放时间进度条的容器ID,不输入时不显示进度
lrcWrapper - 显示歌词的容器ID，不输入时不显示歌词
timeWrapper - 显示时间字符串，不输入时不显示时间
netLrc - 是否自动从网络上搜索歌词:true（或1) - 是，false(或0) - 否，默认false
2、核心方法：
1）new Player(args) - 构造函数，申明一个播放器对象
参数：args - 初始化参数（详见1参数说明），json格式；
示例：var player = new Player({stateWrapper:"stateView",volWrapper:"vol-slider",rateWrapper:"rate-slider",timeWrapper:"timeStr",xmlUrl:"songs.xml"});
2）play(param,name,singer,lrcUrl,args) - 播放
参数：param - 要播放的歌曲索引或url（可选），如果不传参数，播放当前选中的歌曲，第一次时播放第一首；
name - 歌名（可选）；
singer - 歌手（可选）；
lrcUrl - 歌词路径（可选）；
args - 其他参数（可选）,json格式；
示例：player.play(); player.play(0);
3) toPlay(url,name,singer,lrcUrl) - 播放指定URL的歌曲
参数：url - 要播放的歌曲url；
name - 歌名（可选）；
singer - 歌手（可选）；
lrcUrl - 歌词路径（可选）；
示例：player.play("http://www.xx.com/a.mp3","歌名","歌手");
4）pause() - 暂停or播放
5) stop() - 停止
6) next() - 下一曲
7) prev() - 上一曲
8) playState() - 播放状态，返回Media player的playState值
9）getState - 播放状态，返回字符串
10) getSong(param,name,singer) - 获取指定歌曲
参数：param - 歌曲索引或url；
name - 歌名（可选）；
singer - 歌手（可选）；
11) addSong(url,name,singer,isPlay,lrcUrl,bakUrl,args) - 添加新歌曲到播放列表
参数：url - 歌曲播放地址url
name - 歌名；
singer - 歌手；
isPlay - 是否立即播放：1-是、0-否，默认0；
lrcUrl - 歌词地址（可选）；
bakUrl - 备用播放地址（可选），url无效时使用；
args - 其他参数（可选），json格式；
12) addSongXml(xmlUrl,isPlay) - 添加播放列表
参数：xmlUrl - 播放列表XML文件地址；
isPlay - 是否立即播放此列表中的歌曲：1-是、0-否，默认0；
13) delSong(param,name,singer) - 删除歌曲
参数：param - 歌曲索引或url；
name - 歌名（可选）；
singer - 歌手（可选）；
14) clearPlayList() - 清除播放列表
15) getPlayList() - 获取播放列表，返回Song对象数组
16) _disibledevent=>
19) moveDown(no,stop) - 向下移动
参数：no - 要移动的歌曲索引;
stop - 移动到哪一个索引位置结束（可选）；
返回值：返回移动后的新索引值；
示例：var i = player.moveDown(2); //i的值应该是3
20）getCurPlaySong() - 获取当前正在播放歌曲，返回Song对象
3、Song歌曲对象
属性说明：
url - 歌曲文件路径
name - 歌曲名
singer - 歌手
lrcUrl - 歌词路径
args - 其他属性，json格式数据{key:value}
no - 在列表中的索引，从0开始
4、歌曲列表XML文件格式
<?xml version="1.0" encoding="UTF-8"?>
<xml>
<song>
<code>001</code>
<name>红装</name>
<singer>徐良</singer>
<url>F:/music/徐良 - 红装.mp3</url>
<url0>F:/music/徐良 - 红装(备用地址1).mp3</url0>
<url1>F:/music/徐良 - 红装(备用地址2).mp3</url1>
<lrcUrl></lrcUrl>
</song>
<song>
<code>002</code>
<name>你不知道的事</name>
<singer>王力宏</singer>
<url>F:/music/王力宏 - 你不知道的事.mp3</url>
<lrcUrl></lrcUrl>
</song>
<song>
<code>003</code>
<name>需要人陪</name>
<singer>王力宏</singer>
<url>F:/music/王力宏 - 需要人陪.wma</url>
<lrcUrl></lrcUrl>
</song>
<song>
<code>004</code>
<name>偏爱</name>
<singer>张芸京</singer>
<url>F:/music/张芸京 - 偏爱.mp3</url>
<lrcUrl></lrcUrl>
</song>
</xml>
注：要获取以上xml格式中的code值，可通过song.args.code获取;
5、自己使用的效果：
下载源代码及示例
最新评论