自制仿酷我音乐专辑模块源码实现

个人完成编写的schoolnet校园网的仿酷我音乐专辑模块中，用户可以收藏音乐专辑、下载专辑歌曲、关注好友音乐方面的最新动态及在线试听音乐，用户有权管理自己的收藏夹。

实现页面效果：

patent.jsp音乐专辑详情页面

music.jsp音乐大厅页面

mymusic.jsp我的音乐页面

好友动态页面

后台音乐管理设置：

数据库表原型设计：

Song歌曲表：包含主键id、歌曲名name、歌曲地址src、歌曲封面photo、歌手id（用于关联到singer歌手表，暂时未做歌手模块的功能，此字段用于以后做扩展）、所属专辑patentid。

Patent音乐专辑表：包含主键id、专辑名称name、专辑描述descript、专辑封面photo。

Usermusic用户音乐关系表：包含主键id、用户userid、音乐专辑patentid

1、完成编写的schoolnet校园网主要目录结构如下

音乐播放器的开发是比较艰辛的，从前端在html基础上运用用于媒介回放的 video 和 audio 元素、使用css控制样式并在CSS基础上运用圆角边框，向图片添加阴影，字体图标，2D转换，过渡，动画等CSS3新技术、使用javascript实现相关音乐播放、暂停、快进、后退、上一首、下一首、显示相应歌曲图片、歌曲名称、歌手名称等功能，到后台准备数据下了不少功夫。

2、音乐播放器设计的html代码：

<div id="t_wrapper">  <div id="t_cover"> <img src="images/logo_meitu_1.jpg"> </div>  <div id="t_top">    <div id="t_title_info"> <span class="singername"></span> <span class="songname"></span> </div>  </div>  <div id="t_middle">    <span id="prev"></span>    <div id="play"></div>    <div id="pause" class="hidden">     </div>     <span id="next"></span>    <div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="t_progress">      <div id="trackInfo">        <div id="error"> </div>        <div id="current">0:00</div>        <div id="duration">0:00</div>      </div>      <div style="width: 0%;" class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min"></div>      <span style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span> </div>    </div>  <div id="t_bottom">    <div id="range">      <div id="val"></div>      <div id="vol"></div>      <div id="rangeVal"></div>    </div>  </div></div>

3、音乐播放器设计的javascript代码：

var styleChange = {pause:{}, play:{}, plsbutton:{}};styleChange.play.change = function(){$('#play').addClass('hidden');$('#pause').removeClass('hidden');};styleChange.pause.change = function(){$('#pause').addClass('hidden');$('#play').removeClass('hidden');};styleChange.plsbutton.change = function(){$('#t_pls_show').addClass('selectpls');$('#t_pls_show').removeClass('noselectpls');};styleChange.plsbutton.recovery = function(){$('#t_pls_show').addClass('noselectpls');$('#t_pls_show').removeClass('selectpls');};function initAudio(elem) {        var songname = elem.attr('songname');        var cover = elem.attr('t_cover');        var singername = elem.attr('singername');        $('.songname').text(' - ' + songname);        $('.singername').text(singername);        $('#t_cover').html('<img src="' + cover+'">');}$(document).ready(function(){var dur, durM, val, mus, elem, prog;var Pl = 0;$('#playlist ul li a').click(function(){$('#t_title_info').animate({top: "-1.5em",opacity: "hide"}, 0);initAudio($(this).parent("li"));$('#error').text('');styleChange.play.change();console.log(mus);if(mus){mus[0].pause();mus[0].currentTime = 0;$('li').removeClass('active');}mus = $(this).next("audio");$(this).parent("li").addClass('active');mus[0].play();});$('#t_progress').slider({value: 0,orientation: "horizontal",range: "min",animate: true,step: 1});$('audio').on("timeupdate", function() {mus[0].volume = val/100;d = this.duration;c = this.currentTime;curM = Math.floor(c/60);curS = Math.round(c - curM*60);$('#current').text(curM + ':' + curS);$('#t_progress').slider({max: d,min: 0,value: c});});$('audio').on("playing", function () {dur = this.duration;durM = Math.floor(dur/60) + ':' + Math.round((dur - Math.floor(dur/60))/10);        $('#duration').text(durM);$(this).parent("li").addClass('active');$('#t_title_info').animate({top: "0.5em",opacity: "show"}, 500);    });$('audio').on("ended", function(){mus = $(this).parent('li').next('li').first();mus = mus.children('audio');$(this).parent("li").addClass('active');var next = $('li.active').next();$('li').removeClass('active');if(mus[0]){initAudio(next);mus[0].play();}else{$('#error').text('');$('#t_cover').html('<img src="images/userhead/01.gif">');}});//play button$('#play').click(function(){if(mus){mus[0].play();styleChange.play.change();$('#error').text('');}else {$('#error').text();}}); // pause button$('#pause').click(function() {if(mus){mus[0].pause();styleChange.pause.change();}else {$('#error').text();}});//next button$('#next').click(function(){mus[0].pause();mus[0].currentTime = 0;mus = mus.parent('li').next('li').first();mus = mus.children('audio');var next = $('li.active').next();$('#t_title_info').animate({top: "-1.25em",opacity: "hide"}, 0);$('li').removeClass('active');if(mus[0]){initAudio(next);mus[0].play();}else{$('#error').text('');$('#t_cover').html('<img src="images/userhead/02.gif">');mus = null;}});//prev button$('#prev').click(function(){mus[0].pause();mus[0].currentTime = 0;mus = mus.parent('li').prev('li').last();mus = mus.children('audio');var prev = $('li.active').prev();$('li').removeClass('active');$('#t_title_info').animate({top: "-1.25em",opacity: "hide"}, 0);if(mus[0]){initAudio(prev);mus[0].play();}else{$('#error').text('');$('#t_cover').html('<img src="images/userhead/03.gif">');mus = null;}});//volume$('#rangeVal').slider({value: 60,orientation: "horizontal",range: "min",animate: true,step: 1});// volume textval = $('#rangeVal').slider("value");$('#val').text(val);var tooltip = $('#val');tooltip.hide();$('#rangeVal').slider({start: function( event, ui ) {  tooltip.fadeIn('fast');},stop: function(event,ui) {tooltip.fadeOut('fast');},slide: function( event, ui ) {val = ui.value;tooltip.css('left', val-30).text(ui.value);$('#val').text(val);if(mus){mus[0].volume = val/100;}else {$('#error').text();}}});// progress$('#t_progress').slider({start: function( event, ui ) {mus[0].pause();},stop: function( event, ui ) {prog = ui.value;mus[0].currentTime = prog;mus[0].play();styleChange.play.change();}});//playlist button$('#t_pls_show').click(function(){if (Pl == 0) {  styleChange.plsbutton.change();  Pl = 1;  }else {  styleChange.plsbutton.recovery();  Pl = 0;}$('#playlist').slideToggle();});});

4、几个常用的service层组件，暂时不做dao层

//获得所有音乐歌单(专辑)public List<Patent>getallPatents(){List<Patent>allPatents=getResult("from Patent order by id desc", null );returnallPatents;}//获得所有音乐歌单（分页）public List<Patent>getallPatentsByPage(intpageNow,intpageSize){List<Patent>allpPatentsByPage=executeQueryByPage("from Patent order by id desc", null, pageNow, pageSize);returnallpPatentsByPage;}//获得某个音乐歌单的所有歌曲public List<Song>getSongsByPatent(Patent patent){List<Song> songs=getResult("from Song where pagentId=?", new Object[]{patent.getId()});return songs;}//分页获得好友在音乐方面的最新动态@Overridepublic List<Usermusic>getUsermusicByFriend(List<Users>list,intpageNow,intpageSize) {// TODO Auto-generated method stubList<Usermusic>musicList = newArrayList<Usermusic>();List<Usermusic>usermusics=null;for(inti=0;i<list.size();i++){usermusics=executeQueryByPage("from Usermusic where userId=? order by id desc", newObject[]{list.get(i).getId()},pageNow,pageSize);for(int j=0;j<usermusics.size();j++){//由于用户音乐关系表usermusic最初设计时，没有设置创建时间CreTime字段，此处暂时没做音乐动态更新的最近时间设置//try {//if(MyTools.strDate(usermusics.get(j).getCreTime())<=date)//{musicList.add(usermusics.get(j));//}//} catch (Exception e) {//// TODO Auto-generated catch block//e.printStackTrace();//}}}returnmusicList;}

其中executeQueryByPage引用基础Service类

/** * 定义基础Service类，并实现相应的接口，供各个模块的Service类继承 * */@Transactionalpublic abstract class BaseServiceImpl implements BaseServiceInter {//Spring属性注入，会话工厂@Resource SessionFactory sessionFactory;//实现分页查询，下行的注解表示该方法不需开启事务@Transactional(propagation=Propagation.NOT_SUPPORTED) /** * @param hql: 传入的hql语句* @param parameters:hql语句中问号对应的参数数组* @param pageNow:当前页面* @param pageSize:每个页面容纳记录数 * */Public List executeQueryByPage(String hql, Object[] parameters,int pageNow, int PagesSize) {Query query=sessionFactory.getCurrentSession().createQuery(hql);if(parameters!=null && parameters.length>0){for(int i=0;i<parameters.length;i++){query.setParameter(i, parameters[i]);}}if(pageNow<1) {pageNow=1;}//体现分页return query.setFirstResult((pageNow-1)*PagesSize).setMaxResults(PagesSize).list();

5、Controller层几个核心处理代码

// 获取当前的网站的session情况Users user=(Users) request.getSession().getAttribute("loginuser");//获取该用户所在的大学Useruniversityuseruniversity = userService.getUseruniversity(user);//获得该用户所在的高中Userseniorusersenior = userService.getUsersenior(user);//获得该用户所在的初中Junior junior = userService.getJunior(user);//获得该用户所在的城市City city = userService.getCity(user);//获得该用户所在的省份Province province = userService.getProvince(user);//获得该用户的好友个性表List<Friend> friends = userService.getResult("from Friend where f_hostId=? order by id desc",new Object[] { Long.valueOf(user.getId()) });// List<Friend>// lists=userService.executeQueryByPage("from Friend where f_hostId=? order by id desc",// new Object[]{Long.valueOf(user.getId())}, 1, 6);//通过好友关系表获取该用户的好友列表List<Users>friendlList = userService.getFriends(friends);List<Friendapply>friendapplies = userService.getResult("fromFriendapply where fa_getId=? andfa_read=?",new Object[] { Long.valueOf(user.getId()),Integer.valueOf("0") });//获取向我发送了加好友申请的网页List<Users>friendSends = userService.getUsersByFriapp(friendapplies);// System.out.print(friends.size());//通过好友发表的日志,获取该好友信息String pageNow=request.getParameter("pageNow");intpageSize=10;intallrows=userService.getallPatents().size();intpageCount=(allrows-1)/pageSize+1;if(pageNow.equals("0")){pageNow="1";}if(Integer.parseInt(pageNow)>pageCount){pageNow=pageCount+"";}//获得所有音乐歌单（分页）List<Patent> patents=userService.getallPatentsByPage(Integer.valueOf(pageNow), pageSize);//移除用户收藏的音乐专辑String pid=request.getParameter("pid");Usermusicusermusic=(Usermusic) userService.uniqueQuery("from Usermusic where patentId=?", new Object[]{Integer.valueOf(pid)});userService.delete(usermusic);Users user=(Users) request.getSession().getAttribute("loginuser");//如果用户等级小于4，则限制用户音乐下载功能if(user.getLevel()<4){PrintWriter out = null;response.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");try {out = response.getWriter();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}out.print("<script>alert('用户等级达到4以上才能下载,你的等级不够');window.history.go(-1);</script>");}else {String patentid=request.getParameter("patentid");//获取下载歌曲的id号String songid=request.getParameter("songid");//根据id号获得歌曲Song song=(Song) userService.findById(Song.class, Integer.valueOf(songid));//获取歌曲名称String displayname=song.getName();//获取歌曲路径String songsrc=song.getSrc();//调用业务逻辑层的歌曲下载功能MyTools.downmusic(displayname, patentid, songsrc, request, response);//获取用户的积分int website=user.getWebsite();//扣除用户5点积分user.setWebsite(website-5);

6、前端音乐专辑展示页面html代码：

<!-- s_img begin --><div class="s_img"><img src="/schoolnet/Media/patent/${patent.photo }" width="240"height="240" alt="${patent.name }" title="${patent.name }"></div><!-- s_img end --><!-- comm begin --><div class="comm"><h1 title="校园歌曲永远不会老">${patent.name }</h1><p class="button"><img src="/schoolnet/images/front/bluray.png" /></p><ul><li style="margin:5px">歌曲数：<span>${fn:length(songs)}</span></li><li style="margin:5px">制作者：<span>校园admin</span></li><li style="margin:5px">已有<span>${fn:length(patent.usermusics)}</span>个用户收藏</li></ul><p class="tag" style="margin:10px">标签：<span title="校园">校园</span></p></div><!-- comm end --></div><!-- singer end --><div class="tipcomm"><div id="moreContent" style="height: auto; overflow: hidden;"><p id="intro" style="word-wrap:break-word;">${patent.name}简介：${patent.descript }</p></div></div><!-- musiclist begin --><div class="m_list"><div class="pages"><p class="fl" style="margin-left:20px; display:inline;">共${fn:length(songs)}首歌</p><p class="fr"><input id="patentid" value="${patent.id }" type="hidden"> <inputid="userid" value="${loginuser.id }" type="hidden"> <ahref="/schoolnet/music.do?flag=goMyMusic&pageNow=1" title="去我的收藏"class="current2" style="background:#1093d7;">去我的收藏</a><c:if test="${usermusic==null }"><span class="setmusic"><a href="javascript:void(0);"onclick="setPatent()" title="加入收藏" class="current"style="background:#1093d7;">加入收藏</a> </span></c:if><c:if test="${usermusic!=null }"><a title="已经收藏" class="current" style="background:#999;">已经收藏</a></c:if></p></div><br /> <br /><p style="float:right;margin-top:-30px;">每次下载歌曲,将扣除5点经验值</p><div class="list"><div id="playlist" style="margin-top:5px"><ul><c:forEach var="song" items="${patent.songs }"><li id="ll" t_cover="Media/patent/${patent.photo }"singername="${song.singername }" songname="${song.name }"><ahref="javascript:void(0)">${song.singername } – ${song.name }</a><audio preload="none"><source src="Media/song/${patent.id }/${song.src }" type="audio/mp3"> <source src="http://www.sucaijiayuan.com" type="audio/ogg; codecs=vorbis"></audio></li><a href="/schoolnet/music.do?flag=downmusic&patentid=${patent.id }&songid=${song.id }"style="float:right;margin-top:-35px;margin-right:10px;">下载 </a></c:forEach></ul></div><div class="page" id="ge_page"></div></div></div>