jQuery Jplay实现在线音乐播放器

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>

 

发表评论