Erlo

完整打造一个多功能音乐播放器项目(初步设想跟酷狗类似)

时间:2018-05-29 16:47   阅读:197次   来源:博客园页面报错

点赞

本人目前准备利用闲暇时间打造一个完整的音乐播放器项目,主要用于学习及分享!原创不易,转载请注明出处。

       这是一个什么样的音乐播放器呢?整体的架构跟酷狗差不多吧,我的方式呢,是一个个组件一个个模块先做好,最后组合成完整的项目,最后项目会放在本人的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;i<str1.length;i++){
 54                             str2[i-1]=str1[i].split("]");
 55                         }
 56                         for(let i=0;i<str2.length;i++){
 57                             if(lyric.children('p').length==0){
 58                                 lyric.append('<p></p>');
 59                             }
 60                             lyric.children('p').eq(i).html(str2[i][1]);
 61                             lyric.append('<p></p>');
 62                         }
 63                         lyric.css("display","block");
 64                         //str3: "00:00.09",即获取到歌词的前半部分[时间];
 65                         var str3=[],str4=[],str5=[];
 66                         for(var i=2;i<str2.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;i<str3.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;i<str5.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>dorsey</title>
  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
        下一篇:Java 使用正则表达式对象实现正则的获取功能                

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“吐槽厅”,所有人可看,只保留当天信息。

  • Erlo.vip2019-09-21 20:04:12Hello、欢迎使用吐槽厅,这里是个吐槽的地方。
  • 返回顶部