最新网页播放器，兼容各主流浏览器及iphone，使用简单、功能强大、兼容和扩展强

 

（红色部分为最新更新内容）

 

注意：已经最新更新，增加了html5 audio标签，兼容IE、firefox、傲游、Google Chrome、Safari浏览器，同时支持iphone上播放

 

最新更新说明 2011-06-04：

1、用jquery.ui.slider插件代替EXTJS部分功能。

2、增加了两个初始化事件参数；

3、完善了播放列表删除功能；

4、增加支持在状态浏览器窗口状态栏显示当前状态；

5、增加获取和设置静音状态功能；

 

最新更新说明 2012-03-15：
1、增加html5中audio特性，使支持在手机上播放，iphone中测试通过
2、初始化时增加了curLrcCls参数，设置歌词高亮显示样式

 

 

网页播放器在音乐类网站上是必须的，目前网络上也有大量的网页播放器代码，也有很多flash做的（效果不错，但感觉扩展性不太好），不过本人还没有找到使用简单、扩展性强、能同时兼容IE、firefox和傲游浏览器的播放器，为了解决这些问题，我使用jquery写了一个播放器，希望能帮到大家，也希望同各位一起研究、探讨。

 

本插件优点：

1、使用简单：使用面向对象的思想编写。直接new Player()对象就创建了一个播放器；

2、使用JSON格式传初始化参数；

3、支持AJAX动态读取歌曲列表；

4、播放器界面由你自由定制；

5、支持歌词同步显示；

6、可自动从网络上获取歌词；

7、播放时间进度条、声音进度条可自由控制；

8、支持歌曲列表排序、删除；

9、功能强大、使用简单、扩展性强

10、兼容性强，支持各主流浏览器及iphone

 

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，不输入时不显示歌词

         curLrcCls - 歌词高亮显示样式（默认显示红色）

         timeWrapper- 显示时间字符串，不输入时不显示时间

         netLrc- 是否自动从网络上搜索歌词:true（或1) -是，false(或0) -否，默认false

         onChange - 歌曲切换时触发的事件
         onReady - 加载完成时触发的事件

2、核心方法：

         1）newPlayer(args) -构造函数，申明一个播放器对象

                   参数：args -初始化参数（详见1参数说明），json格式；

                   示例：var player = new Player({

   　　　　 pauseBtn:"btnPlay",
   　　　　 pauseCls:"pause",
   　　　　 playCls:"play",
   　　　　 stateWrapper:"window.status",
   　　　　 volWrapper:"vol_slider",
   　　　　 rateWrapper:"rate_slider",
   　　　　 timeWrapper:"time_wrapper",
   　　　　 lrcWrapper:"lyric",
   　　　　 netLrc:true,
   　　　　 autoStart:true,
   　　　　 xmlUrl:"../songs.xml",
   　　　　 onChange:function(song){
    　　　　　　　　 alert("正在播放："+song.singer+"的《"+song.name+"》"); 

　　　　　 },
   　　　　 onReady:function(){
    　　　　　　　　 alert("播放器加载完成！");
   　　　　 }
  　 });

         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)onChange(fn) - 切换歌曲时触发的事件

                   参数：fn -触发的function(Song)

                   示例：player.onChange(function(song){alert("当前播放："+song.toString());});

         17)onReady(fn) - 当加裁完成时触发的事件

                   参数：fn -触发的function()

                   示例：player.onReady(function(){alert("播放器加载完成");});

         18)moveUp(no,stop) - 向上移动

                   参数：no -要移动的歌曲索引;

                         stop - 移动到哪一个索引位置结束（可选）；

                   返回值：返回移动后的新索引值；

                   示例：var i =player.moveUp(2); //i的值应该是1

         19)moveDown(no,stop) - 向下移动

                   参数：no -要移动的歌曲索引;

                         stop - 移动到哪一个索引位置结束（可选）；

                   返回值：返回移动后的新索引值；

                   示例：var i =player.moveDown(2); //i的值应该是3

         20）getCurPlaySong()-获取当前正在播放歌曲，返回Song对象

 21）mute(b) - 获取或设置静音状态
　    参数：b - true:静音；false:解除静音；不传此参数获取当前是否为静音状态；

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、示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>播放器示例</title><link rel="stylesheet" type="text/css" href="extjs/ext-slider.css" mce_href="extjs/ext-slider.css" /><mce:script type="text/javascript" src="extjs/ext-base.js" mce_src="extjs/ext-base.js"></mce:script><mce:script type="text/javascript" src="extjs/ext-all.js" mce_src="extjs/ext-all.js"></mce:script><mce:script type="text/javascript" src="../jquery-1.4.3.min.js" mce_src="jquery-1.4.3.min.js"></mce:script><mce:script type="text/javascript" src="utils.js" mce_src="utils.js"></mce:script><mce:script type="text/javascript" src="lyric.js" mce_src="lyric.js"></mce:script><mce:script type="text/javascript" src="player.js" mce_src="player.js"></mce:script><mce:script type="text/javascript"><!--var p = new Player({stateWrapper:"stateView",pauseBtn:"btnPause",pauseCls:"pause",playCls:"play",volWrapper:"vol-slider",rateWrapper:"rate-slider",timeWrapper:"timeStr",lrcWrapper:"lyric",netLrc:true,playCount:0,xmlUrl:"songs.xml"});function showPlayList(){var playList = p.getPlayList();var s = "当前播放列表中共有"+playList.length+"首歌曲：";s += "<table id='songs' border='1'><tr><th>NO</th><th>编码</th><th>歌名</th><th>歌手</th><th>操作</th></tr>"for(var i=0; i<playList.length; i++){s += "<tr id='song_"+playList[i].no+"'><td><input type='checkbox' name='chk' value='"+playList[i].no+"'>"+playList[i].no+"</td><td>"+playList[i].args.code+"</td><td>"+playList[i].name+"</td><td>"+playList[i].singer+"</td><td><input type='button' value='Play' onclick=/"play('"+playList[i].no+"')/"></td><tr>";}s += "</table>";//alert(s);$("#playList").html(s);}function play(no){p.play(no);}$(function(){p.onReady(function(){//加载完成显示歌曲列表showPlayList();});$("#btnPause").click(function(){p.pause();});$("#btnStop").click(function(){p.stop();});$("#btnPrev").click(function(){p.prev();});$("#btnNext").click(function(){p.next();});$("#btnDel").click(function(){$("input[name='chk']:checked").each(function(){p.delSong(this.value);});showPlayList();});$("#btnUp").click(function(){$("input[name='chk']:checked").each(function(i){p.moveUp(this.value);});showPlayList();});$("#btnDown").click(function(){$("input[name='chk']:checked").each(function(i){p.moveDown(this.value);});showPlayList();});p.onChange(function(song){$("tr[id*='song']").css("background-color","");$("#song_"+song.no).css("background-color","#CCCCFF");});});// --></mce:script></head><body><br /><div id="playList"></div><br /><input type="button" id="btnDel" value="delete"><input type="button" id="btnUp" value="move up"><input type="button" id="btnDown" value="move down"><br /><br />音量：<div id="vol-slider" style="width:160px"></div><br />进度：<span id="timeStr"></span><div id="rate-slider" style="width:260px"></div><br /><span id="btnPrev" class="prev"></span><span id="btnPause" class="play"></span><span id="btnStop" class="stop"></span><span id="btnNext" class="next"></span><br /><br /><div id="stateView"></div><br /><br />歌词：<div id="lyric" style="overflow-y: scroll; height: 400px; width: 426px;border:1px red solid;"></div></body></html> 

 

 

6、我自己使用的效果图

 

 

下载最新源代码及示例代码20120319更新