JS代码:
<script type="text/javascript" language="javascript" > $(document).ready(function(){ var player = $("#jquery_jplayer_1"); var nowMusic; //播放动作 function play(id){ //播放新的音乐 player.jPlayer("setMedia",{ mp3: "mp3/"+id+".mp3" }).jPlayer("play"); //改变播放音乐背景色 $("ul#playList").children('"#'+id+'"').css("color","blue"); //设置当前播放音乐 nowMusic = id; } //停止动作 function stop(id){ $("ul#playList").children('"#'+id+'"').css("color","black"); } $("#jquery_jplayer_1").jPlayer({ ready: function () { console.log("开始播放。。。"); playList = $("ul#playList").children(); if(playList.length > 0){ nowMusic = playList[0].id; play(nowMusic); } }, ended: function (event) { console.log("播放结束。。。"); stop(nowMusic);//歌曲播放结束动作 var nowLi = $("ul#playList").children('"#'+nowMusic+'"');//获取当前播放音乐位置 var nextLi = nowLi.next()[0]; //获取下一首音乐 if(nextLi && nextLi.id > 0){ console.log("存在下一曲,播放下一曲。。。"); nextMusic = nextLi.id; play(nextMusic); }else{ //播放第一首 console.log("不存在下一曲,播放第一首。。。"); var first = $("ul#playList").children(":first"); play(first[0].id); } }, swfPath: "swf", supplied: "mp3" }) .bind($.jPlayer.event.play, function() { // pause other instances of player when current one play $(this).jPlayer("pauseOthers"); }); //绑定播放歌曲事件 $("a.play").bind("click",toPlay); //播放歌曲 function toPlay(){ stop(nowMusic); nowMusic = this.id; play(nowMusic); } //添加到播放列表 $("a.add").click(function(){ selMusic = this.id; selMusicName = this.name; //$("ul#playList").append("<li id='"+selMusic+"'>"+selMusicName+"<a href='#' class='play' id='"+selMusic+"'>播放</a><a href='#' class='delete' id='"+selMusic+"'>删除</a></li>"); $("ul#playList").append("<li id='"+selMusic+"'><a class='play' style='cursor:pointer' id='"+selMusic+"' title='点击播放''>"+selMusicName+"</a></li>"); //重新绑定歌曲 $("a.play").bind("click",toPlay); }); }) </script>
播放列表:
<div class="musicList"> <!-- 歌曲列表 --> <?php foreach ($musicList as $music) { ?> <div class="m_l_item"> <div class="m_l_i_title"> <?=$music->getName()?> </div> <div class="m_l_i_add"> <a style="cursor:pointer" class="add" id="<?=$music->getId()?>" name="<?=$music->getName()?>" title="添加到播放列表">添加</a> </div> </div> <?php } ?> </div>
播放器:
<div id="jp_playlist_1" class="jp-playlist"> <li>-------------------播放列表-----------------</li> <ul id="playList"> <li id="1"> <a class="play" style="cursor:pointer" id="1" title="点击播放">忧伤还是快乐</a> </li> </ul> </div>