本人目前准备利用闲暇时间打造一个完整的音乐播放器项目，主要用于学习及分享！原创不易，转载请注明出处。
这是一个什么样的音乐播放器呢？整体的架构跟酷狗差不多吧，我的方式呢，是一个个组件一个个模块先做好，最后组合成完整的项目，最后项目会放在本人的github上，等项目完毕后会发布链接。另外呢，这个算是对自己曾经封装过的函数的一些检验，为了方便原理上的了解，整个项目不会用到任何的控件及插件，算是从底层的js或jq+audio开始吧（实际开发不推荐，这样效率太低，不过用于提升自己的还是推荐这样，写过一遍跟引用一遍是完全不同两个概念），当然也会适当的封一些函数，这些会放在文章的最末尾，每个模块或多或少都会引用其中部分函数。
模块①、歌词同步：（为了方便测试，先用了html5提供好的audio标签，我们只做歌词功能），初步效果是这样：（另外直接在酷狗下载歌词文件就可以用了）
这个其实不难，不过呢，咱用点最笨的办法（关于解析字符串，不用正则匹配），酷狗都用过吧，里面的歌词文件是.krc文件，这种文件是加密过的，所以呢，从酷狗下载下来的歌词文件需要先转化成lrc文件，推荐下面的软件：
krc文件点开是这样的：
转化成lrc文件后是这样的：
注意这时候lrc文件的字符编码不是utf-8，各位需要自行另存为utf-8文件，好了，歌词文件准备好了，可以开始我们的歌词模块了。
css及js文件我全部放在html里，完善后会逐步封装，css会采用less代替。
1 DOCTYPE html> 2 html lang="en"> 3 head> 4 meta charset="UTF-8"> 5 title>基于js的更高级常用函数封装title> 6 script src="../js/jquery-3.3.1.min.js" type="text/javascript">script> 7 script src="../js/mine/dc-handle-function.js" type="text/javascript">script> 8 style> 9 .preload{ 10 width:200px; 11 height:100px; 12 position:absolute; 13 top:35%; 14 left:40%; 15 } 16 .preload img{ 17 width:100%; 18 height:100%; 19 } 20 .lyric{ 21 width:400px; 22 height:500px; 23 margin:0 auto; 24 display:none; 25 overflow-y:auto; 26 overflow-x:hidden; 27 font:18px "华文楷体"; 28 color:black; 29 text-align: center; 30 box-shadow:-2px 2px 15px #fff; 31 background:rgba(0,255,255,0.3); 32 } 33 .music{ 34 width:400px; 35 margin:0 auto; 36 } 37 .music audio{ 38 width:100%; 39 } 40 body{ 41 overflow:scroll; 42 background:url("../resource/bg.jpg") fixed no-repeat;background-size:cover; 43 } 44 style> 45 script> 46 $(function(){ 47 dorseyHf.dc_ajax_g('../resource/av/ChiQingZhong1.lrc?t='+new Date().getTime(), 48 function(str){ 49 //这个函数以后也是会封装的。 50 var str1=str.split("["); 51 var str2=[]; 52 var lyric=$(".lyric"); 53 for(var i=1;istr1.length;i++){ 54 str2[i-1]=str1[i].split("]"); 55 } 56 for(let i=0;istr2.length;i++){ 57 if(lyric.children('p').length==0){ 58 lyric.append(''); 59 } 60 lyric.children('p').eq(i).html(str2[i][1]); 61 lyric.append(''); 62 } 63 lyric.css("display","block"); 64 //str3: "00：00.09"，即获取到歌词的前半部分[时间]； 65 var str3=[],str4=[],str5=[]; 66 for(var i=2;istr2.length;i++){ 67 str3[i-2]=str2[i][0]; 68 } 69 //str4: str4[i][0]="00";str4[i][1]="00.09" 70 //str5：计算str4转化后min:sec的值，单位(s)，用于后续与当前时间比较。 71 for(var i=0;istr3.length;i++){ 72 str4[i]=str3[i].split(":"); 73 str5[i]=(parseFloat(str4[i][0])*60)+parseFloat(str4[i][1]); 74 console.log("p"+i+":"+lyric.children('p').eq(i+2).offset().top); 75 } 76 $('audio').on("timeupdate",function(){ 77 var scale=this.currentTime; 78 // var k=[]; 79 for(var i=0;istr5.length;i++){ 80 if(scale>=str5[i]){ 81 lyric.children('p').eq(i+2).css("color","red").siblings().css("color",""); 82 lyric.children('p').eq(i+2).css("transform","scale(1.4)"). 83 siblings().css("transform",""); 84 k[i]=i; 85 // lyric.scrollTop(lyric.children('p').eq(i).offset().top); 86 } 87 } 88 // var music=k.length; 89 // console.log(music+": "+lyric.children('p').eq(music).offset().top); 90 }); 91 },$('img')); 92 }) 93 script> 94 head> 95 body> 96 div class="music"> 97 audio src="../resource/av/ChiQingZhong.mp3" controls="controls">audio> 98 div> 99 div class="preload"> 100 img src="../resource/preload.gif" alt=""> 101 div> 102 div class="lyric"> 103 div> 104 body> 105 html>
这里需要引用一些封装函数，需引入dorseyHf类库（这里不贴了请看最后面），jq的压缩版自行百度：
模块②、音乐盒之基本功能——播放暂停，上下首切换，歌曲详情，歌曲播放进度（可自由拖动），自动列表循环播放。
不知不觉快1点了，时间过得好快，这个项目的左侧是音乐盒，右侧是拓展，音乐盒是这样：
算上拓展功能差不多是这样：
由于本人不懂UI，配色设计不好请见谅，咱更看重的是功能实现，废话不多说了。
初步构思的时候，整个播放器的图标还是比较多的，这里推荐一种比较好的方式——阿里字体iconfont，跟你逛淘宝一样，进入iconfont官网后，对你想要的图标各种买买买，加购物车，当然不用钱的，你再也不用担心你男朋友不帮你清空购物车了，添加完购物车后呢，这些字体呢有好几种方式提供给你，做成图标的png格式，svg格式，jpg格式等等，还有最重要的字体模式，你点下载代码就可以了。
下载完解压是这样的：
你只需根据提示（点开3个html里面任意一个看你要用什么格式，这写html可以理解成教学文档之类的），照着做就可以了。
好了，基本的素材准备好了，开始我们的代码之旅吧！
html部分：
1 DOCTYPE html> 2 html lang="en"> 3 head> 4 meta charset="UTF-8"> 5 title>dorseytitle> 6 link rel="shortcut icon" href="../resource/favicon.ico" type="image/x-icon"/> 7 link rel="stylesheet" href="../css/music.min.css" type="text/css"> 8 9 script src="../font/index/iconfont.js">script>阿里字体引入--> 10 script src="../dist/jquery-3.3.1.min.js" type="text/javascript">script>jQuery框架引入--> 11 12 动画引入，动画推荐“wow”（该插件兼容性也只是IE10+，有历史遗留的请慎用）--> 13 script src="../dist/dc-animate.js" type="text/javascript">script> 14 15 script src="../js/music.js" type="text/javascript">script> 16 head> 17 body> 18 div class="music"> 19 div class="playerBg">div> 20 div class
登录查看全部
参与评论
手机查看
返回顶部