程序博客网 > 大宗商品软件系统

基于jplayer的播放器

来源：互联网 发布：大宗商品软件系统 编辑：程序博客网 时间：2024/05/14 12:16

因为音乐网站需要一个播放器，而我又不会写播放器，于是我开始上网百度了。下了n个flash播放器，界面不错，但是我不会as，根本不知道怎么和php结合，xml呢？一样。所以就选择了比较熟悉的js来写了。但是网上的人说js不能写播放器，只能控制mediaplayer，我就郁闷了，mediaplayer那么丑陋，难道就要委屈求全？！后来，小哲告诉我一个音乐网站http://www.luoo.net/，一打开网页，我惯性地查看它的源代码，发现它用了jplayer这个jquery插件，jplayer是通过js控制flash播放器来实现播放音乐的目的的，而且播放器的界面可以自己设计，这样就可以实现我们的最初想法了。由于时间紧迫，我们决定先写几个简单的功能，以后再慢慢完善。下面是demo和源代码：

js的播放器 - 小丸子 - 小丸子

html：

<body>
<!--整个播放器-->
<div id="player">
<!--播放器各功能模块-->
<div id="pic">
<!--显示歌名-->
<div id="songname"></div>
<!--播放进度-->
<div id="player_progress">
<div id="play_time"></div>
<div id="total_time"></div>
<div id="player_progress_load_bar" class="jqjp_buffer">
<div id="player_progress_play_bar"></div>
</div>
</div>
<!--播放器按钮-->
<div id="functions">
<div id="player_play">播放</div>
<div id="player_pause">暂停</div>
<div id="player_stop">停止</div>
<div id="player_prev">上一首</div>
<div id="player_next">下一首</div>
</div>
<!--音量-->
<div id="player_volumn">
<div id="player_volume_min">静音</div>
<div id="player_volume_bar">
<div id="player_volume_bar_value"></div>
</div>
<div id="player_volume_max">最大</div>
</div>
</div>
<div id="jquery_jplayer"></div>
<!--播放列表-->
<div id="playlist_list">
<ul class="playlist_content" >
<li jplayer="mp3/Stereophonics-Just_Looking.mp3" songer="杨千嬅" ablum="麦芽糖" songname="Stereophonics-Just Looking">Stereophonics-Just Looking</li>
<li jplayer="mp3/Taylor_Swift-Forever&Always(PianoVersion).mp3" songer="破天荒" ablum="专辑3"  songname="Taylor_Swift-Forever&Always(PianoVersion)">Taylor_Swift-Forever&Always(PianoVersion)</li>
<li jplayer="mp3/TaylorSwift-You'reNotSorry.mp3" songer="棉花糖" ablum="专辑4"  songname="TaylorSwift-You'reNotSorry">TaylorSwift-You'reNotSorry</li>
</ul>
</div>
</div>
</body>

js：

$(function(){
/*设置flash文件路径*/
$("#jquery_jplayer").jPlayer({
 swfPath:"js"
});

/*按钮*/
$("#jquery_jplayer").jPlayerId("play", "player_play");
$("#jquery_jplayer").jPlayerId("pause", "player_pause");
$("#jquery_jplayer").jPlayerId("stop", "player_stop");
$("#jquery_jplayer").jPlayerId("loadBar", "player_progress_load_bar");
$("#jquery_jplayer").jPlayerId("playBar", "player_progress_play_bar");
$("#jquery_jplayer").jPlayerId("volumeMin", "player_volume_min");
$("#jquery_jplayer").jPlayerId("volumeMax", "player_volume_max");
$("#jquery_jplayer").jPlayerId("volumeBar", "player_volume_bar");
$("#jquery_jplayer").jPlayerId("volumeBarValue", "player_volume_bar_value");

/*选择播放*/
$("ul.playlist_content li").click(function(){
 $(this).addClass("playlist_current").siblings().removeClass("playlist_current");
 var currentIndex=$(this).index();
    var name = $(".playlist_content li:eq("+currentIndex+")").attr("songname");
    $("#songname").text(name);
 var src = $(this).attr("jplayer");
 $(this).addClass("playlist_current");
 $("#jquery_jplayer").changeAndPlay(src);
});

$("#jquery_jplayer").onSoundComplete(function(){
 var total=$("ul.playlist_content li").length;
    //获取当前li的序号
 var currentIndex = $("ul.playlist_content li").index($(".playlist_current"));
 ++currentIndex;
 if(currentIndex>total-1)
 {
  $("#jquery_jplayer").stop();
  return false;
 }
 var name = $(".playlist_content li:eq("+currentIndex+")").attr("songname");
    $("#songname").text(name);
 var src = $("ul.playlist_content li:eq("+currentIndex+")").attr("jplayer");
 $("ul.playlist_content li").addClass("playlist_current").siblings().removeClass("playlist_current");
 $("ul.playlist_content li:eq("+currentIndex+")").addClass("playlist_current");
 $("#jquery_jplayer").changeAndPlay(src);
});
$("#player_next").mouseover(function(){
 $(this).addClass("jqjp_hover");  
});
$("#player_next").mouseout(function(){
 $(this).removeClass("jqjp_hover");  
});
$("#player_prev").mouseover(function(){
 $(this).addClass("jqjp_hover");  
});
$("#player_prev").mouseout(function(){
 $(this).removeClass("jqjp_hover");  
});

/*手动切换下一首*/
$("#player_next").click(function(){
 //获取列表总长度
 var total=$("ul.playlist_content li").length;
    //获取当前li的序号
 var currentIndex = $("ul.playlist_content li").index($(".playlist_current"));
 ++currentIndex;
 if(currentIndex>total-1)
 {
  alert("这是最后一首歌！");
  return false;
 }
 var name = $(".playlist_content li:eq("+currentIndex+")").attr("songname");
    $("#songname").text(name);
 var src = $("ul.playlist_content li:eq("+currentIndex+")").attr("jplayer");
 $("ul.playlist_content li").addClass("playlist_current").siblings().removeClass("playlist_current");
 $("ul.playlist_content li:eq("+currentIndex+")").addClass("playlist_current");
 $("#jquery_jplayer").changeAndPlay(src);
});

/*手动切换上一首*/
$("#player_prev").click(function(){
 //获取列表总长度
 var total=$("ul.playlist_content li").length;
    //获取当前li的序号
 var currentIndex = $("ul.playlist_content li").index($(".playlist_current"));
 --currentIndex;
 if(currentIndex<0)
 {
  alert("这是第一首歌！");
  return false;
 }
 var name = $(".playlist_content li:eq("+currentIndex+")").attr("songname");
    $("#songname").text(name);
 var src = $("ul.playlist_content li:eq("+currentIndex+")").attr("jplayer");
 $("ul.playlist_content li").addClass("playlist_current").siblings().removeClass("playlist_current");
 $("ul.playlist_content li:eq("+currentIndex+")").addClass("playlist_current");
 $("#jquery_jplayer").changeAndPlay(src);
});

/*播放进度*/
$("#jquery_jplayer").onProgressChange( function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
var myPlayedTime = new Date(playedTime);
var ptMin = (myPlayedTime.getMinutes() < 10) ? "0" + myPlayedTime.getMinutes() : myPlayedTime.getMinutes();
var ptSec = (myPlayedTime.getSeconds() < 10) ? "0" + myPlayedTime.getSeconds() : myPlayedTime.getSeconds();
$("#play_time").text(ptMin+":"+ptSec);
var myTotalTime = new Date(totalTime);
var ttMin = (myTotalTime.getMinutes() < 10) ? "0" + myTotalTime.getMinutes() : myTotalTime.getMinutes();
var ttSec = (myTotalTime.getSeconds() < 10) ? "0" + myTotalTime.getSeconds() : myTotalTime.getSeconds();
$("#total_time").text(ttMin+":"+ttSec);
});

/*播放列表*/
$("ul.playlist_content li").mouseover(function(){
 $(this).addClass("playlist_hover");  
});
$("ul.playlist_content li").mouseout(function(){
 $(this).removeClass("playlist_hover");  
});

 


});

css：

/*整个播放器*/
#player {
 width:360px;
 margin:0 auto;
 position:relative;
}
/*播放器各功能模块*/
#pic {
 width:100%;
 height:200px;
 float:left;
 background-color:#0FF
}
/*当前歌曲*/
.playlist_current {
 background-color:#06F
}
/*显示歌名*/
#songname {
 width:100%;
 text-align:center;
 height:20px
}
/*播放进度*/
#player_progress {
 position:absolute;
 top:50px;
 left:90px;
 float:left;
 background-color:#999;
 width:180px;
 height:15px;
 -moz-border-radius-bottomleft:4px;
 -moz-border-radius-bottomright:4px;
 -moz-border-radius-topleft:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-left-radius:4px 4px;
 -webkit-border-top-right-radius:4px 4px;
 -webkit-border-bottom-right-radius:4px 4px;
 -webkit-border-bottom-left-radius:4px 4px;
}
#player_progress_load_bar {
 background: url(../skin/default/images/bar_load.gif) top left repeat-x;
 width:0px;
 height:15px;
 cursor: pointer;
 -moz-border-radius-bottomleft:4px;
 -moz-border-radius-bottomright:4px;
 -moz-border-radius-topleft:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-left-radius:4px 4px;
 -webkit-border-top-right-radius:4px 4px;
 -webkit-border-bottom-right-radius:4px 4px;
 -webkit-border-bottom-left-radius:4px 4px;
}
#player_progress_load_bar.jqjp_buffer {
 background: url(../skin/default/images/bar_buffer.gif) top left repeat-x;
 cursor: pointer;
 -moz-border-radius-bottomleft:4px;
 -moz-border-radius-bottomright:4px;
 -moz-border-radius-topleft:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-left-radius:4px 4px;
 -webkit-border-top-right-radius:4px 4px;
 -webkit-border-bottom-right-radius:4px 4px;
 -webkit-border-bottom-left-radius:4px 4px;
}
#player_progress_play_bar {
 background: url(../skin/default/images/bar_play.gif) top left repeat-x;
 width:0px;
 height:15px;
 -moz-border-radius-bottomleft:4px;
 -moz-border-radius-bottomright:4px;
 -moz-border-radius-topleft:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-left-radius:4px 4px;
 -webkit-border-top-right-radius:4px 4px;
 -webkit-border-bottom-right-radius:4px 4px;
 -webkit-border-bottom-left-radius:4px 4px;
}
#play_time {
 float:left;
}
#play_time, #total_time {
 width:178px;
 font-size:12px;
 color:#000;
 position:absolute;
 top:18px
}
#total_time {
 text-align:right;
}
/*播放器按钮*/
#functions {
 float:left;
 height:100px;
}
#player_play, #player_pause, #player_stop, #player_next, #player_prev {
 margin-left:10px;
 cursor:pointer;
 color:#333;
 margin-top:100px;
 float:left
}
.jqjp_hover {
 cursor:pointer;
 background-color:#0C0
}
/*播放音量*/
#player_volumn {
 width:150px;
 height:20px;
 float:left;
 margin-top:4px;
 margin-left:220px
}
#player_volume_min {
 float:left
}
#player_volume_max {
 float:left
}
#player_volume_bar {
 float:left;
 margin-top:4px;
 float:left;
 background-color:#999;
 width:50px;
 height:8px;
 -moz-border-radius-bottomleft:4px;
 -moz-border-radius-bottomright:4px;
 -moz-border-radius-topleft:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-left-radius:4px 4px;
 -webkit-border-top-right-radius:4px 4px;
 -webkit-border-bottom-right-radius:4px 4px;
 -webkit-border-bottom-left-radius:4px 4px;
}
#player_volume_bar_value {
 float:left;
 float:left;
 background-color:#09F;
 width:0px;
 height:8px;
 -moz-border-radius-bottomleft:4px;
 -moz-border-radius-bottomright:4px;
 -moz-border-radius-topleft:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-left-radius:4px 4px;
 -webkit-border-top-right-radius:4px 4px;
 -webkit-border-bottom-right-radius:4px 4px;
 -webkit-border-bottom-left-radius:4px 4px;
}
/*播放列表*/
#playlist_list {
 height:451px;
 float:left;
 width:100%
}
#playlist_list ul {
 list-style:none;
 padding:0px;
}
#playlist_list ul li {
 cursor:pointer;
 border:#000 1px solid;
 margin-top:3px;
 width:100%;
 overflow:hidden;
 white-space:nowrap
}
.playlist_hover {
 background-color:#6F0;
}

下面我继续努力，把播放器的功能完善。

大宗商品软件系统 大宗商品软件系统
原创粉丝点击
热门IT博客
activity之间传递数据activity之间传递数据
vr虚拟现实的意义 知乎vr虚拟现实的意义 知乎
关闭电脑21端口
淘宝助理推荐信息空白
计算机如何识别c语言
java项目开发流程
cocos2d x js
阿部宽年轻照片知乎
大数据相关的书
知乎周刊全集
matlab2015b mac 迅雷
钢铁行情分析软件
张伯伦助攻数据统计
北京专业数据恢复
联通 数据副卡
微信炸群软件安卓版
车辆识别软件 手机
炉石大数据2017
中国阶层 知乎
wang域名可以备案吗
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 深圳过珠海 厦门珠海 郑州珠海 珠海和深圳 珠海有 长春珠海 珠海订蛋糕 珠海-深圳 珠海 楼盘 珠海电话 珠海小户型 珠海605 珠海-南京 理工大学珠海学院 珠海城市职业技术学院 珠海人力资才网 珠海长隆门票 珠海货船遇险沉没 珠海长隆攻略 珠海城市技术学院 珠海邮政编码 珠海市人民医院 珠海哪里好玩 珠海人力资源招聘 珠海有什么好玩 珠海人民医院 珠海属于哪个省 珠海景点排名 珠海烟花表演 广州珠海一货船遇险沉没 珠海金湾机场 珠海一日游攻略 珠海市人力资网 珠海人才市场 珠海美食攻略 珠海在哪个城市 珠海海滨公园 珠海是那个省 珠海必去景点 珠海属于几线城市 珠海属于哪个省份

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里