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

综合技术 2018-05-22 阅读原文

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

这是一个什么样的音乐播放器呢?整体的架构跟酷狗差不多吧,我的方式呢,是一个个组件一个个模块先做好,最后组合成完整的项目,最后项目会放在本人的gitub上,等项目完毕后会发布链接。

模块①、歌词同步: (为了方便测试,先用了h5集成好的audio标签,我们只做歌词功能),初步效果是这样:(另外直接在酷狗下载歌词文件就可以用了)

这个其实不难,不过呢,咱用点最笨的办法(关于解析字符串,不用正则匹配),酷狗都用过吧,里面的歌词文件是.krc文件,这种文件是加密过的,所以呢,从酷狗下载下来的歌词文件需要先转化成lrc文件,推荐下面的软件:

krc文件点开是这样的:

转化成lrc文件后是这样的:

注意这时候lrc文件的字符编码不是utf-8,各位需要自行另存为utf-8文件,好了,歌词文件准备好了,可以开始我们的歌词模块了。

css及js文件我全部放在html里,完善后会逐步封装,css会采用less代替。

  1 
  2 
  3 
  4     
  5     基于js的更高级常用函数封装
  6     
  7     
  8     
  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     
 45     
 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('

'); 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;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[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)").siblings().css("transform",""); 83 k[i]=i; 84 // lyric.scrollTop(lyric.children('p').eq(i).offset().top); 85 } 86 } 87 var music=k.length; 88 console.log(music+": "+lyric.children('p').eq(music).offset().top); 89 }); 90 },$('img')); 91 }) 92 93 94 95
96 97
98
99 100
101
102
103 104

这里引用了一些封装函数,需引入这个文件,jq的压缩版自行百度:

 1 ;(function(win){ //前面这分号别去掉哦,防止多个js文件合并压缩时因上一个js文件末尾少";"而带来的问题。
 2 
 3     "use strict"; //严格模式,一般写自己类库的时候最好加上,减少一些代码不规范引起的错误。
 4 
 5     /*模块说明:dorseyHf作为一切处理函数的入口*/
 6     let dorseyHf=function(){
 7         return new dorseyHf.fn.init();
 8     };
 9     dorseyHf.fn=dorseyHf.prototype={
10         constructor:dorseyHf, //接口名:是dorsey-handle-function的缩写。意为函数处理
11         init:function(){
12             return this;
13         },
14         math:{//数学相关处理函数,注意需要通过接口dorseyHf来调用,如dorseyHf.math.random(100,200);
15             random:function(min,max){//生成一个指定范围大小的随机数,默认值小数点后15位
16                 return Math.random()*(max-min)+min;
17             },
18             randomAccuracy:function(min,max,dec){ //生成一个可以任意指定精度的随机数
19                 return Math.round((Math.random()*(max-min)+min)*Math.pow(10,dec))/Math.pow(10,dec);
20             }
21         },
22         dc_ajax_g:function(url,fnSucceed,preObj,fnFail){//ajax获取操作
23             /**
24              * url:可以是后台接口,json数据,也可以是json文件位置
25              * fnSucceed:ajax获取成功后的操作
26              * preObj:预加载,ajax由于要与后台服务器做交互,这需要时间,特别是前后交互数据较大时,用于提醒用户
27              *         现在在做加载,请稍后...一般是一个gif,或者干脆一个请稍后都行,注意的是基于JQuery的$(select)对象。
28              * fnFail:ajax获取失败后返回的操作,一般类似于404这样的东西。
29              * */
30             preObj.css("display","block");
31             setTimeout(function(){
32                 var oAjax = new XMLHttpRequest();
33                 oAjax.open('GET',url,true);
34                 oAjax.send();
35                 oAjax.onreadystatechange=function(){
36                     if(oAjax.readyState==4){
37                         if(oAjax.status==200){
38                             fnSucceed(oAjax.responseText);//获取文本或者json数据
39                             preObj.css("display","none");
40                         }
41                         else{
42                             if(fnFail){
43                                 fnFail(oAjax.status);
44                             }
45                         }
46                     }
47                 };
48             },1500);//这个延迟最好改为0,或者干脆把setTimeout去掉,这样加的原因是方便那些ajax获取过快的
49             // 用户可以查看到这个预加载的效果。
50         }
51     };
52     dorseyHf=dorseyHf.fn.init.fn=dorseyHf.fn;
53     win.dorseyHf=dorseyHf;
54 })(window);

后续每个模块写好了会逐步更新,等项目最终完毕了会挂载到github,各位到时可自行下载。

博客园精华区

责编内容by:博客园精华区阅读原文】。感谢您的支持!

您可能感兴趣的

Iterators and Generators do have a place in modern... I have been asked a few times and by different software developers about the possible use cases for Iterators/Generators...
js对象属性名驼峰式转下划线 一、题目示例: 思路: 1、匹配属性名字符串中的大写字母和数字 2、通过匹配后的lastIndex属性获取匹配到的大写字母和数字的位置 3、判断大写字母的位置是否为首位置以及lastIndex是否为0,为0则表示匹配结束 ...
CodeMirror 5.30.0 发布,在线代码编辑器 CodeMirror 5.30.0 已发布,CodeMirror 是一款“Online Source Editor”,基于 Javascript,短小精悍,实时在线代码高亮显示,它不是某个富文本编辑器的附属产品,而是许多大名鼎鼎的在线代码编...
现代 JavaScript 速查 简介 初心 本文档是一份 JavaScript 速查表,你在现代项目中会经常遇到,以及最新的代码示例。 本指南不是为了教你从头开始学习 JavaScript ,而是为了帮助那些可能不熟悉当前代码库(例如 React)所用到...
面试常见问题之实现bind函数 原文首发于我的 博客 ,说实话,这半年来在各大社区看别人分享的面试题中 bind 函数已经出现 n 多次了,这次准备详细探究下 首先让我们看看 mdn 对于 bind 函数的描述是什么 语法 fun.bind(...