jquery音乐播放器特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery音乐播放器特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery音乐播放器特效</title>
<style type="text/css">
.wrapper{ margin:0px auto; padding:20px; border:1px solid #CCC; background:#333; width:980px; font-size:12px;}
</style>
<link rel="stylesheet" href="css/zzsc.css" type="text/css" />
</head>
<body>
<!-- 代码 开始 -->
<div class="wrapper">
<div id="player"></div>
<div class="player">
	<div class="player-l bg"></div>
	<div class="player-block bg">
		<div class="playlist">
			<span><p class="bg"></p>列表</span>
			<select class="selectobj" id="list"></select>
			<div class="select"></div>
		</div>
		<div class="seprator bg"></div>
		<div class="controls">
			<a href="#" class="pre mode-bg" title="上一曲"></a>
			<a href="#" class="play mode-bg" title="播放" style="display:none"></a>
			<a href="#" class="pause mode-bg" title="暂停"></a>
			<a href="#" class="next mode-bg" title="下一曲"></a>
			<span style="float:left; margin-left:5px; margin-right:3px; display:inline;">
				<a href="#" class="random-mode random-mode-select mode-bg"  title="随机播放"></a>
				<a href="#" class="order-mode mode-bg"  title="列表循环"></a>
				<a href="#" class="single-mode mode-bg"  title="单曲循环"></a>
			</span>
			<a href="#" class="download bg" id="download" title="下载舞曲">下载</a>
		</div>
		<div class="seprator bg"></div>
		<div class="info">
			<div class="song-name">欢迎使用程序员设计师联盟淘宝店</div><div class="time" id="playtime">00:00</div><div class="s" >/</div><div class="time" id="totaltime">00:00</div>
			<div class="tracks bg">
				<div class="download-bar bg">
					<div class="l bg">l</div>
					<div class="r bg">r</div>
				</div>
				<div class="seek-bar bg">
					<div class="l bg"></div>
					<div class="r bg"></div>
					<div class="point bg"></div>
				</div>
			</div>
		</div>
		<div class="seprator bg"></div>
		<div class="volumn">
			<a class="mute mode-bg"></a>
			<a class="unmute mode-bg"></a>
			<div class="line bg">
				<div class="tracks" id="volumn">
					<div class="volumn-bar bg">
						<div class="l bg"></div>
						<div class="r bg"></div>
						<div class="point bg"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="player-r bg"></div>
</div>
<script language="javascript" type="text/javascript" src="js/f.js"></script>
<script language="javascript" type="text/javascript" src="js/data.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script language="javascript" type="text/javascript" src="js/main.js"></script>
</div>
</body></html>

JS代码(data.js):

//DATA("歌名","地址","ID");
	DATA("You Raise Me Up","http://www.lanrentuku.com/","1");
	DATA("The Glorious Death","http://www.lanrentuku.com/","2");
	DATA("My Love","http://www.lanrentuku.com/","3");

JS代码(f.js):

// JavaScript Documentfunction DATA(songname,songurl){
	songname = (document.getElementById("list").options.length + 1) + "." + songname;
	var opt = new Option(songname,songurl);
	opt.setAttribute("downloadid",arguments[2]);
	document.getElementById("list").options.add(opt);
}
function GetRandomNum(Min,Max){
	var Range = Max - Min;
	var Rand = Math.random();
	return(Min + Math.round(Rand * Range));
}
function get_cookie(_name){
	var Res=eval('/'+_name+'=([^;
	]+)/').exec(document.cookie);
	return Res==null?'':unescape(Res[1]);
}
;
	function chk_open(){
	if( 'Y' == get_cookie('open_player') ){
	location.href='close.htm';
}
else{
	setTimeout('chk_open()',3000);
}
}
;
	chk_open();

JS代码(main.js):

// JavaScript Documentvar play_mode = "rand";
	//取值：order:顺序播放,single:单曲播放,rand:随机播放var loop_mode = "list";
	//取值:list:列表循环,single:单曲循环,none:不循环$(document.body).ready(function(){
	$.jPlayer.timeFormat.showHour = true;
	$("#player").jPlayer({
	ready:function (event){
	$("#list").get(0).selectedIndex=0;
	$("#list").trigger("change");
}
,play:function(event){
	$(".song-name").html(event.jPlayer.status.media.title);
	var id = event.jPlayer.status.media.id;
	if(id!="undefined"){
	$("#download").attr("target","_blank");
	$("#download").attr("href",$("#list").find("option:selected").val());
}
else{
	$("#download").attr("target","");
	$("#download").attr("href","#");
	return false;
}
}
,ended:function(event){
	$(".song-name").html("播放完毕");
	if(play_mode=="single" && loop_mode=="single"){
	var index = $("#list").get(0).selectedIndex;
	$("#list").get(0).selectedIndex=index;
	$("#list").trigger("change");
}
else if(play_mode=="rand"){
	var max = document.getElementById("list").options.length;
	var targetIndex = GetRandomNum(0,max);
	$("#list").get(0).selectedIndex=targetIndex;
	$("#list").trigger("change");
}
$(".song-name").html("欢迎使用懒人图库!");
}
,timeupdate:function(event){
	var percent = (event.jPlayer.status.currentTime / event.jPlayer.status.duration) *100;
	$(".seek-bar").css("width",percent + "%");
	$("#duration").html($.jPlayer.convertTime(event.jPlayer.status.duration));
}
,supplied:"m4a",swfPath:"scripts",wmode:"window",loop:false,volume:1,cssSelectorAncestor:"",cssSelector:{
	currentTime:"#playtime",duration:"#totaltime",seekBar:".download-bar",playBar:".seek-bar",play:".play",pause:".pause",mute:".mute",unmute:".unmute",volumeBar:"#volumn",volumeBarValue:".volumn-bar"}
}
);
	//绑定停止按钮$(".btn-stop").click(function(){
	$("#playing-state").html("播放停止");
	$("#playing-songname").html("欢迎使用懒人图库!");
	//$("#player").jPlayer("clearMedia");
	$("#player").jPlayer("stop");
	return false;
}
);
	//绑定列表选择事件$("#list").change(function(){
	var url = $("#list").find("option:selected").val();
	var songname = $("#list").find("option:selected").text();
	var id = $("#list").find("option:selected").attr("downloadid");
	$("#player").jPlayer("setMedia",{
	title:songname,m4a:url,id:id}
).jPlayer("play");
}
);
	//绑定上一曲，下一曲事件$(".pre,.next").click(function(){
	var targetIndex = -1;
	var index = $("#list").get(0).selectedIndex;
	var mode = null;
	var state = $("#playing-state").html();
	/* if(state=="播放完毕"){
	mode = "rand";
}
else{
	mode = play_mode;
}
*/
 mode = play_mode;
	switch(mode){
	//随机播放case "rand":{
	var max = document.getElementById("list").options.length;
	if(loop_mode=="single"){
	//单曲循环模式,targetIndex=index;
}
else{
	//targetIndex = GetRandomNum(0,max);
	if(this.className=="pre mode-bg"){
	if(index==0){
	targetIndex==document.getElementById("list").options.length-1;
}
else{
	targetIndex=index-1;
}
}
else if(this.className=="next mode-bg"){
	if(index==document.getElementById("list").options.length-1){
	targetIndex=0;
}
else{
	targetIndex=index+1;
}
}
}
break;
}
//单曲循环case "single":{
	if(this.className=="pre mode-bg"){
	if(index==0){
	targetIndex=document.getElementById("list").options.length-1;
}
else{
	targetIndex=index-1;
}
}
else if(this.className=="next mode-bg"){
	if(index==document.getElementById("list").options.length-1){
	targetIndex=0;
}
else{
	targetIndex=index+1;
}
}
break;
}
//顺序播放case "order":{
	if(loop_mode=="single"){
	//单曲循环模式,targetIndex=index;
}
else{
	if(this.className=="pre mode-bg"){
	if(index==0){
	if(loop_mode=="list"){
	targetIndex = document.getElementById("list").options.length-1;
}
else if(loop_mode=="none"){
	$(".btn-stop").trigger("click");
}
}
else{
	targetIndex = index - 1;
}
}
else if(this.className=="next mode-bg"){
	//已经达到最后一个idif(index==document.getElementById("list").options.length-1){
	if(loop_mode=="list"){
	targetIndex = 0;
}
else if(loop_mode=="none"){
	$(".btn-stop").trigger("click");
}
}
else{
	targetIndex = index + 1;
}
}
else{
	return false;
}
}
break;
}
}
if(targetIndex!=-1){
	$("#list").get(0).selectedIndex=targetIndex;
	$("#list").trigger("change");
}
return false;
}
);
	//绑定循环模式$(".controls span a").click(function(){
	$(".controls span a.order-mode").removeClass("order-mode-select");
	$(".controls span a.random-mode").removeClass("random-mode-select");
	$(".controls span a.single-mode").removeClass("single-mode-select");
	var current_classname = $(this).attr("class").split(" ")[0];
	$(this).addClass(current_classname + "-select");
	switch(current_classname){
	case "order-mode":{
	play_mode = "order";
	loop_mode = "list"break;
}
case "single-mode":{
	play_mode = "single";
	loop_mode = "single"break;
}
case "random-mode":{
	play_mode = "rand";
	loop_mode = "list";
	break;
}
}
return false;
}
);
}
);

CSS代码(zzsc.css):

/* CSS Document */
.bg{background:url(../images/player.png);_background:url(../images/player.gif);}
.mode-bg{background:url(../images/mode.gif);}
.player{margin-left:auto;margin-right:auto;width:980px;height:35px;}
.player-l{float:left;width:3px;height:35px;background-position:0px 0px;}
.player-r{float:left;width:3px;height:35px;background-position:-11px 0px;}
.player-block{float:left;width:974px;display:block;height:35px;background-position:0px -38px;background-repeat:repeat-x;}
.player-block .playlist{float:left;margin-top:8px;margin-left:10px;margin-right:10px;width:240px;height:18px;border:1px solid #6d6d6d;background:#585858;position:relative;display:inline;}
.player-block .playlist p{position:absolute;width:10px;height:11px;left:4px;top:3px;background-position:-43px -13px;margin:0;padding:0;}
.player-block .playlist span{position:absolute;left:0px;top:0px;padding-left:20px;padding-right:10px;color:#fff;display:block;background-color:#616161;border-right:1px solid #6d6d6d;line-height:18px;_line-height:20px;height:18px;overflow:hidden;}
.player-block .playlist .select{position:absolute;right:0px;top:0px;border:3px solid #585858;width:238px;height:12px;z-index:3;display:none;*display:block;_display:none;}
.player-block .playlist select{width:183px;height:18px;position:absolute;top:0px;left:56px;background:#585858;border:none;padding:2px;color:#fff;padding-top:1px;z-index:1;font-size:12px;}
.seprator{float:left;width:3px;height:35px;background-position:-17px 0px;}
.player-block .controls{float:left;width:auto;height:35px;padding-left:5px;padding-right:5px;}
.player-block .controls a{margin-left:5px;display:inline;}
.player-block .controls a.single-mode{float:left;width:29px;height:26px;display:block;background-position:0px -40px;margin-top:5px;margin-left:0px;}
.player-block .controls a:hover.single-mode,.player-block .controls a.single-mode-select{background-position:0px -5px;}
.player-block .controls a.random-mode{float:left;width:28px;height:26px;display:block;background-position:-61px -40px;margin-top:5px;margin-left:0px;}
.player-block .controls a:hover.random-mode,.player-block .controls a.random-mode-select{background-position:-61px -5px;}
.player-block .controls a.order-mode{float:left;width:28px;height:26px;display:block;background-position:-31px -40px;margin-top:5px;margin-left:0px;}
.player-block .controls a:hover.order-mode,.player-block .controls a.order-mode-select{background-position:-31px -5px;}
.player-block .controls a.pre{float:left;width:26px;height:26px;display:block;background-position:-92px -40px;margin-top:5px;}
.player-block .controls a:hover.pre{background-position:-92px -5px;}
.player-block .controls a.pause{float:left;width:30px;height:30px;display:block;background-position:-171px -40px;margin-top:4px;}
.player-block .controls a:hover.pause{background-position:-171px -5px;}
.player-block .controls a.play{float:left;width:30px;height:30px;display:block;background-position:-130px -40px;margin-top:4px;}
.player-block .controls a:hover.play{background-position:-130px -5px;}
.player-block .controls a.next{float:left;width:26px;height:27px;display:block;background-position:-253px -40px;margin-top:4px;}
.player-block .controls a:hover.next{background-position:-253px -5px;}
.player-block .controls a.download{float:left;width:34px;height:20px;display:block;background-position:-58px -10px;margin-top:8px;color:#fff;padding-left:23px;line-height:20px;text-decoration:none;}
.player-block .info{float:left;width:300px;height:26px;color:#fff;padding-left:5px;padding-right:5px;padding-top:2px;padding-bottom:2px;}
.player-block .info .song-name{float:left;width:210px;height:15px;margin-top:2px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.player-block .info .s{float:left;width:5px;height:15px;line-height:15px;margin-top:2px;text-align:right;}
.player-block .info .time{float:left;height:15px;line-height:15px;margin-top:2px;text-align:right;}
.player-block .info .tracks{float:left;width:290px;height:7px;background-position:0px -198px;margin-top:5px;padding-left:3px;position:relative;}
.player-block .info .tracks .download-bar{position:absolute;left:0px;top:-1px;_top:0px;width:30%;height:7px;margin-left:2px;display:inline;background-position:0px -231px;background-repeat:repeat-x;min-width:2px;z-index:0;}
.player-block .info .tracks .download-bar .l{float:left;width:3px;height:7px;background-position:0px -224px;margin-left:-3px;_margin-top:-1px;font-size:0px;position:relative;display:inline;}
.player-block .info .tracks .download-bar .r{float:right;width:5px;height:7px;background-position:0px -238px;margin-right:-3px;_margin-top:-1px;font-size:0px;position:relative;display:inline;}
.player-block .info .tracks .seek-bar{position:absolute;left:0px;top:0px;width:10%;height:7px;margin-left:2px;display:inline;background-position:0px -271px;background-repeat:repeat-x;min-width:2px;z-index:1;}
.player-block .info .tracks .seek-bar .l{float:left;width:4px;height:7px;background-position:0px -262px;margin-left:-3px;margin-top:-1px;_margin-top:-2px;font-size:0px;position:relative;display:inline;}
.player-block .info .tracks .seek-bar .r{float:right;width:3px;height:7px;background-position:-1px -279px;margin-right:-3px;margin-top:0px;font-size:0px;position:absolute;right:0px;display:inline;}
.player-block .info .tracks .seek-bar .point{position:absolute;right:0px;width:13px;height:13px;background-position:-146px -12px;margin-right:-5px;margin-top:-4px;_margin-top:-5px;}
.player-block .volumn{float:left;width:110px;height:26px;color:#fff;padding-left:5px;padding-right:5px;padding-top:2px;padding-bottom:2px;}
.player-block .volumn .mute{float:left;width:20px;height:17px;background-position:-287px -2px;margin-top:10px;display:none;}
.player-block .volumn .unmute{float:left;width:20px;height:17px;background-position:-287px -22px;;margin-top:10px;}
.player-block .volumn .line{float:left;width:80px;background-position:0px -107px;margin-top:11px;margin-left:10px;display:inline;}
.player-block .volumn .tracks{float:left;width:90%;height:10px;padding-left:6px;position:relative;}
.player-block .volumn .tracks .volumn-bar{position:absolute;left:0px;top:0px;width:40%;height:10px;margin-left:2px;display:inline;background-position:0px -85px;background-repeat:repeat-x;min-width:2px;}
.player-block .volumn .tracks .volumn-bar .l{float:left;width:4px;height:10px;background-position:0px -75px;margin-left:-3px;margin-top:0px;_margin-top:0px;font-size:0px;position:relative;display:inline;}
.player-block .volumn .tracks .volumn-bar .r{float:right;width:3px;height:10px;background-position:-1px -95px;margin-right:-3px;margin-top:0px;font-size:0px;position:absolute;right:0px;display:inline;}
.player-block .volumn .tracks .volumn-bar .point{position:absolute;right:0px;width:15px;_width:16px;height:15px;background-position:-122px -12px;margin-right:-5px;margin-top:-2px;_margin-top:-3px;}

附件:下载该文件资源,减少时间成本(增值服务)