完整打造一個多功能音樂播放器項目（初步設想跟酷狗相似）
本人目前準備利用閒暇時間打造一個完整的音樂播放器項目，主要用於學習及分享！原創不易，轉載請註明出處。javascript
這是一個什麼樣的音樂播放器呢？總體的架構跟酷狗差很少吧，個人方式呢，是一個個組件一個個模塊先作好，最後組合成完整的項目，最後項目會放在本人的github上，等項目完畢後會發佈連接。另外呢，這個算是對本身曾經封裝過的函數的一些檢驗，爲了方便原理上的瞭解，整個項目不會用到任何的控件及插件，算是從底層的js或jq+audio開始吧（實際開發不推薦，這樣效率過低，不過用於提高本身的仍是推薦這樣，寫過一遍跟引用一遍是徹底不一樣兩個概念），固然也會適當的封一些函數，這些會放在文章的最末尾，每一個模塊或多或少都會引用其中部分函數。css
模塊①、歌詞同步：（爲了方便測試，先用了html5提供好的audio標籤，咱們只作歌詞功能），初步效果是這樣：（另外直接在酷狗下載歌詞文件就能夠用了）html
這個其實不難，不過呢，咱用點最笨的辦法（關於解析字符串，不用正則匹配），酷狗都用過吧，裏面的歌詞文件是.krc文件，這種文件是加密過的，因此呢，從酷狗下載下來的歌詞文件須要先轉化成lrc文件，推薦下面的軟件：html5
krc文件點開是這樣的：java
轉化成lrc文件後是這樣的：jquery
注意這時候lrc文件的字符編碼不是utf-8，各位須要自行另存爲utf-8文件，好了，歌詞文件準備好了，能夠開始咱們的歌詞模塊了。git
css及js文件我所有放在html裏，完善後會逐步封裝，css會採用less代替。github
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的壓縮版自行百度：web
模塊②、音樂盒之基本功能——播放暫停，上下首切換，歌曲詳情，歌曲播放進度（可自由拖動），自動列表循環播放。ajax
不知不覺快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="player"> 21 <!--這是這個音樂播放器的核心：音樂盒，主要包含的功能模塊相似於酷狗左側那個框，好比列表list，最近播放recentPlay，播放欄 22 （上下頁，開始暫停播放，播放進度，音量，播放方式等等），本地音樂，音樂電臺，網絡收藏等等--> 23 <div class="musicBox dc_left"> 24 <div class="header"> 25 <ul> 26 <li class="logo dc_left"><img src="../resource/logo.gif" alt=""></li> 27 <li class="dc_left"><img src="" class="ver"><span>dorsey</span></li> 28 <li class="dc_right dc_icon"> 29 <img src="" class="ver"> 30 <svg class="icon unfold" aria-hidden="true"> 31 <use xlink:href="#icon-iconzhankai"></use> 32 </svg> 33 <svg class="icon" aria-hidden="true"> 34 <use xlink:href="#icon-zuixiaohua3"></use> 35 </svg> 36 <svg class="icon" aria-hidden="true"> 37 <use xlink:href="#icon-iconfonticon2"></use> 38 </svg> 39 </li> 40 </ul> 41 </div> 42 <!--音樂盒導航，實際上能夠當作是一個選項卡--> 43 <div class="nav"> 44 <ul> 45 <li> 46 <img src="" class="ver"> 47 <svg class="icon" aria-hidden="true"> 48 <use xlink:href="#icon-yinlemusic214"></use> 49 </svg> 50 </li> 51 <li> 52 <img src="" class="ver"> 53 <svg class="icon" aria-hidden="true"> 54 <use xlink:href="#icon-guanyuyunguanjia"></use> 55 </svg> 56 </li> 57 <li> 58 <img src="" class="ver"> 59 <svg class="icon" aria-hidden="true"> 60 <use xlink:href="#icon-xinhaojieshouqi"></use> 61 </svg> 62 </li> 63 <li> 64 <img src="" class="ver"> 65 <svg class="icon" aria-hidden="true"> 66 <use xlink:href="#icon-shouji"></use> 67 </svg> 68 </li> 69 <li> 70 <img src="" class="ver"> 71 <svg class="icon" aria-hidden="true"> 72 <use xlink:href="#icon-wenjianjia-zhankai"></use> 73 </svg> 74 </li> 75 </ul> 76 </div> 77 <!--音樂盒導航欄每一個導航對應的內容:一、音樂列表，二、網絡收藏，三、音樂電臺，四、連接手機，五、本地音樂--> 78 <div class="nav_detail"> 79 <div class="musicList on">音樂列表</div> 80 <div class="cloudCollect">網絡收藏</div> 81 <div class="musicDisk">音樂電臺</div> 82 <div class="musicMP">手機管理</div> 83 <div class="musicLocal">本地音樂</div> 84 </div> 85 <!--音樂盒核心部分，播放歌曲，上下首切換，播放進度，音量，播放模式，顯示歌詞，我喜歡（收藏），下載歌曲， 86 更多（暫時沒想好，用做拓展用），因爲這個模塊相對功能較多，個人時間比較零散，因此準備拆分紅幾個模塊來作： 87 一、基本功能：播放暫停，上下首切換，播放進度 88 二、拓展功能1：播放模式 89 三、拓展功能2：歌詞顯示，歌詞模塊的代碼會改爲字符串正則匹配的方式 90 四、拓展功能3：音量，下載歌曲 91 五、拓展功能4：我喜歡（收藏），更多（看狀況吧，可能僅僅只有點擊效果，暫時想不到要添加什麼） 92 --> 93 <div class="musicPlayer"> 94 <!--<div class="logo1">dorsey</div>--> 95 <div class="feature"> 96 <div class="btn_basic"> 97 <svg class="icon pre" aria-hidden="true"> <!--上一首按鈕--> 98 <use xlink:href="#icon-unie622"></use> 99 </svg> 100 <svg class="icon play" aria-hidden="true" style=""> <!--播放按鈕--> 101 <use xlink:href="#icon-bofang"></use> 102 </svg> 103 <svg class="icon pause noDisplay" aria-hidden="true"> <!--暫停按鈕--> 104 <use xlink:href="#icon-pause"></use> 105 </svg> 106 <svg class="icon next" aria-hidden="true"> <!--下一首按鈕--> 107 <use xlink:href="#icon-unie623"></use> 108 </svg> 109 <div> 110 <!--<hr>--> 111 </div> 112 </div> 113 <div class="others"> 114 <svg class="icon" aria-hidden="true"> <!--收藏按鈕--> 115 <use xlink:href="#icon-like-1"></use> 116 </svg> 117 <svg class="icon" aria-hidden="true"> <!--下載按鈕--> 118 <use xlink:href="#icon-xiazai"></use> 119 </svg> 120 <svg class="icon" aria-hidden="true"> <!--播放模式按鈕--> 121 <use xlink:href="#icon-danquxunhuan"></use> 122 </svg> 123 <svg class="icon" aria-hidden="true"> <!--音量調整按鈕--> 124 <use xlink:href="#icon-mn_shengyin"></use> 125 </svg> 126 <svg class="icon" aria-hidden="true"> <!--更多按鈕--> 127 <use xlink:href="#icon-gengduo-copy"></use> 128 </svg> 129 <svg class="icon" aria-hidden="true"> <!--歌詞文本按鈕--> 130 <use xlink:href="#icon-text3wenben"></use> 131 </svg> 132 </div> 133 </div> 134 <div class="progressBar"> 135 <div class="time"> 136 <span class="dc_left">賈青-癡情冢</span> 137 <span class="dc_right">01:16 / 03:22</span> 138 </div> 139 <span class="barBg"> 140 <span class="barFg"></span> 141 <span class="barSlide"></span> 142 </span> 143 </div> 144 </div> 145 <!--H5音樂播放--> 146 <audio src="../resource/av/賈青-癡情冢.mp3" class="audio"></audio> 147 </div> 148 <!--這部分是整個音樂播放器的拓展，如歌詞，音效，播放隊列，一鍵換膚，一鍵收起展開等等後續想到再一一補充--> 149 <div class="extensions dc_left"> 150 拓展功能 151 </div> 152 </div> 153 </div> 154 </body> 155 </html>
css
body,dd,div,dt,h1,h2,h3,h4,h5,h6,html,li,ol,p,span,table,ul{margin:0;padding:0}li,ul{list-style:none}a{text-decoration:none}.dc_left{float:left}.dc_right{float:right}.dc_clear{content:"";display:block;clear:both}.dc_mar_center{margin:0 auto}.dc_title{font:30px 華文楷體;color:red;text-align:center;text-shadow:0 0 3px #7e0000}.dc_pointer{cursor:pointer}.dc_c_red{color:red}.icon{width:1.5em;height:1.5em;vertical-align:-.15em;fill:currentColor;overflow:hidden;color:#fff;cursor:pointer;transition:.5s}.icon:hover{transform:scale(1.5)}.music{width:1000px;height:600px;margin:50px auto 0;position:relative}.playerBg{width:100%;height:100%;position:absolute;opacity:.3}.ver{width:0;height:100%;vertical-align:middle;visibility:hidden}.player{width:100%;height:100%;position:absolute;color:#fff}.player .musicBox{width:30%;height:100%;box-shadow:-1px 1px 10px #fff;-webkit-box-shadow:-1px 1px 10px #fff;-moz-box-shadow:-1px 1px 10px #fff;-o-box-shadow:-1px 1px 10px #fff}.player .musicBox .header{width:100%;height:8%;background:rgba(255,255,255,.3)}.player .musicBox .header ul{width:100%;height:100%}.player .musicBox .header li{height:100%;font:15px "Times New Roman";box-sizing:border-box}.player .musicBox .header .logo{width:12%;height:100%;margin-left:10px}.player .musicBox .header .logo img{margin-top:8%;width:100%;height:80%}.player .musicBox .header .dc_icon{text-align:right;padding:2%}.player .musicBox .header .dc_icon .icon{width:1.2em;height:1em}.player .musicBox .nav{width:100%;height:6%;background:rgba(255,255,255,.2)}.player .musicBox .nav ul{width:100%;height:100%;margin-left:-1%}.player .musicBox .nav li{width:20%;height:100%;box-sizing:border-box;text-align:center;padding:2%;float:left}.player .musicBox .nav li .icon{color:#6fff2d}.player .musicBox .nav_detail{width:100%;height:70%;background:rgba(255,255,255,.1);position:relative}.player .musicBox .nav_detail div{width:100%;height:100%;position:absolute;font:50px "華文楷體";text-align:center;line-height:400px;display:none}.player .musicBox .nav_detail .on{display:block}.player .musicBox .musicPlayer{width:100%;height:16%;background:rgba(255,255,255,.2)}.player .musicBox .musicPlayer .feature{width:100%;height:60%;padding:.5em;box-sizing:border-box}.player .musicBox .musicPlayer .feature .btn_basic{width:50%;height:100%;float:left;padding:.75em 0;box-sizing:border-box}.player .musicBox .musicPlayer .feature .btn_basic .pause,.player .musicBox .musicPlayer .feature .btn_basic .play{transform:scale(2);margin:0 1em}.player .musicBox .musicPlayer .feature .btn_basic .noDisplay{display:none}.player .musicBox .musicPlayer .feature .others{width:50%;height:100%;float:left;text-align:right;padding:1em 0;box-sizing:border-box}.player .musicBox .musicPlayer .feature .others .icon{width:1em;height:1em}.player .musicBox .musicPlayer .progressBar{width:90%;height:30%;margin:1% 5% 5%;transition:all .2s;position:relative;box-sizing:border-box}.player .musicBox .musicPlayer .progressBar .time{width:100%;font:12px "Times New Roman";margin-bottom:2px}.player .musicBox .musicPlayer .progressBar .time:after{content:"";display:block;clear:both}.player .musicBox .musicPlayer .progressBar .barBg{position:absolute;width:100%;height:3px;background:#ccc;border-radius:1.5px 1.5px 1.5px 1.5px;-webkit-border-radius:1.5px 1.5px 1.5px 1.5px;-moz-border-radius:1.5px 1.5px 1.5px 1.5px}.player .musicBox .musicPlayer .progressBar .barFg{position:absolute;width:100px;height:3px;background:linear-gradient(to left,#438aff,#cdfff7);border-radius:1.5px 1.5px 1.5px 1.5px;-webkit-border-radius:1.5px 1.5px 1.5px 1.5px;-moz-border-radius:1.5px 1.5px 1.5px 1.5px}.player .musicBox .musicPlayer .progressBar .barSlide{position:absolute;width:10px;height:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px;left:90px;top:-3.5px;background:linear-gradient(to right,#438aff,#fff,#438aff);cursor:pointer}.player .extensions{width:70%;height:100%;visibility:hidden;box-shadow:1px 1px 10px #fff;-webkit-box-shadow:1px 1px 10px #fff;-moz-box-shadow:1px 1px 10px #fff;-o-box-shadow:1px 1px 10px #fff;font:50px '華文楷體';text-align:center;line-height:200px}body{background:url(../resource/images/bg10.png) fixed no-repeat;background-size:100% 100%}
js
1 $(function(){ 2 /*展開拓展欄按鈕功能函數*/ 3 $('.icon.unfold').click(function(){ 4 $(this).css("display","none");//展開按鈕點擊後隱藏 5 let oExt=$('.extensions'); 6 dorseyAn.unfold(oExt,"translate3d(-80%,-70%,0)","0.5s");//調用dorseyAn的動畫彈出函數 7 }); 8 /*導航欄功能函數*/ 9 $('.nav li').click(function(){ 10 $(this).find('.icon').css("color","white").siblings().find('.icon'); 11 $(this).siblings().find('.icon').css("color",""); 12 $(".nav_detail").children('div').eq($(this).index()).addClass('on').siblings().removeClass('on'); 13 }); 14 /** 15 * 播放模塊功能：這些函數暫時比較雜，後面等功能完善了會一一封裝，也會優雅一些 16 * 包括上下首歌曲切換，播放與暫停，播放進度及播放的歌曲簡介如歌手歌名等等，這裏先這樣，後續音樂列表那還會 17 * 作一個頭像，並在播放時旋轉。 18 * */ 19 20 /**基本功能定義的變量，一個個定義的話也是能夠的，不過呢，這樣泄露太多全局變量，起碼在咱們這裏是全局變量，咱用 21 * 個全局對象接口包一下，也方便統一管理與後期維護 22 * */ 23 let msBasic={ 24 $play:$('.icon.play'), //播放按鈕 25 $pause:$('.icon.pause'),//暫停按鈕 26 $audio:$('.audio'),//html5標籤<audio></audio>，這裏注意是jquery選出來的，是一個對象 27 $next:$('.icon.next'),//下一首 28 $pre:$('.icon.pre'),//上一首 29 30 $barBg:$('.progressBar .barBg'),//進度條背景色標籤對象 31 $barFg:$('.progressBar .barFg'),//進度條前景色標籤對象 32 $barSlide:$('.progressBar .barSlide'),//進度條滑塊標籤對象 33 $progressTime:$('.progressBar .time'),//播放進度及正在播放的歌曲簡介信息（歌手，歌名等等） 34 $dragAble:false //用於判斷拖拽的滑塊是否按下 35 }; 36 let flag=0; 37 let musicTi=['賈青 - 癡情冢','胡歌 - 月光 (TV版)','胡歌、白冰 - 美麗的神話']; 38 //musicTi：歌名文件（存儲你全部的歌曲），須要後臺提供一個存儲歌名的json，爲方便測試，暫用字符串代替 39 let play=function(){ 40 msBasic.$play.hide(); 41 msBasic.$pause.show(); 42 msBasic.$audio.get(0).play(); 43 }; 44 let pause=function(){ 45 msBasic.$pause.hide(); 46 msBasic.$play.show(); 47 msBasic.$audio.get(0).pause(); 48 }; 49 /*播放按鈕*/ 50 msBasic.$play.click(function(){ 51 play(); 52 }); 53 /*暫停按鈕*/ 54 msBasic.$pause.click(function(){ 55 pause(); 56 }); 57 let next=function(){ 58 flag++; 59 flag%=musicTi.length; 60 msBasic.$audio.attr("src","../resource/av/"+musicTi[flag]+".mp3"); 61 msBasic.$progressTime.children('span').eq(0).html(musicTi[flag]); 62 play(); 63 }; 64 let previous=function(){ 65 flag--; 66 flag<0?flag=musicTi.length-1:flag; 67 msBasic.$audio.attr("src","../resource/av/"+musicTi[flag]+".mp3"); 68 msBasic.$progressTime.children('span').eq(0).html(musicTi[flag]); 69 play(); 70 }; 71 /*下一首歌曲按鈕*/ 72 msBasic.$next.click(function(){ 73 next(); 74 }); 75 /*上一首歌曲按鈕*/ 76 msBasic.$pre.click(function(){ 77 previous(); 78 }); 79 /*監聽歌曲時間變化，固然用js的addEventListener也能夠*/ 80 msBasic.$audio.on("timeupdate",function(){ 81 var min,sec,minAll="00",secAll="00"; 82 /*歌曲當前播放進度*/ 83 min=dorseyHf.timeHandle(this.currentTime,"minute");//調用dorseyHf的時間處理函數，算是比較簡單的封裝吧 84 sec=dorseyHf.timeHandle(this.currentTime,"second"); 85 /*歌曲播放總時長*/ 86 if(this.duration){ 87 //爲何用if呢？你能夠去掉試試，由於當咱們切換上下首時，duration監聽不到，是一個undefined,會使計算的結果變成NaN， 88 // 這樣咱們的界面也會看到這個NaN（計算的結果非數字值），這樣就很差了 89 minAll=dorseyHf.timeHandle(this.duration,"minute"); 90 secAll=dorseyHf.timeHandle(this.duration,"second"); 91 } 92 /*播放進度條*/ 93 var allW=msBasic.$barBg.outerWidth(),slideW; 94 slideW=allW*this.currentTime/this.duration;//當前播放進度時間除以總歌曲持續時間 95 msBasic.$barFg.css("width",slideW+"px"); 96 msBasic.$barSlide.css("left",slideW+"px"); 97 msBasic.$progressTime.children('span').eq(1).html(min+":"+sec+"/"+minAll+":"+secAll); 98 //播放完畢自動播放下一首 99 if(this.currentTime>=this.duration-1){ 100 //想一想爲何要這樣？而不是簡單的currentTime等於duration就能夠了？ 101 next(); 102 } 103 }); 104 /*監聽鼠標拖拽*/ 105 msBasic.$barSlide.on("mousedown",function(e){ 106 e=e||window.event; 107 msBasic.$slideAble=true; 108 var ex=e.pageX-msBasic.$barSlide.get(0).offsetLeft; 109 //每一次點擊都存儲一個滑塊x初值，因爲這裏滑塊得保持水平，因此不加一個Y， 110 // 這裏各位能夠延伸寫一個拖拽組件出來 111 $(document).on({ 112 mousemove:function(e){ 113 e=e||window.event; 114 if(msBasic.$slideAble){ 115 var l=e.pageX-ex; //你會不會有疑問，l=e.pageX-ex=e.pageX-(e.pageX-其它)=其它？呵呵，兩個是不同的哈！ 116 //L的值，其實呢很簡單，初中數學的x1-x2，只不過咱們須要再考慮個本來滑塊到瀏覽器邊緣的距離 117 l>msBasic.$barBg.width()-1?l=msBasic.$barBg.width()-1:l; //判斷拖拽條是否超界 118 l<0?l=0:l; 119 msBasic.$audio.get(0).currentTime=(l/msBasic.$barBg.width())*msBasic.$audio.get(0).duration; 120 msBasic.$barFg.css("width",l+"px"); 121 msBasic.$barSlide.css("left",l+"px"); 122 } 123 }, 124 mouseup:function(){ 125 msBasic.$slideAble=false; 126 } 127 }); 128 }); 129 });
雖然說這裏僅僅只有兩個模塊，不過呢，其實一個簡易的音樂播放器就出來了（雖然說純底層語言作，但其實算上註釋130行的代碼也能夠接受，固然還能夠更低，暫時先這樣），固然，咱們的理想不只僅是這樣，對吧！
最後，須要引入的兩個js庫文件
一、dorseyAn：動畫
1 ;(function(win){ //前面這分號別去掉哦，防止多個js文件合併壓縮時因上一個js文件末尾少";"而帶來的問題。 2 3 "use strict"; //嚴格模式，通常寫本身類庫的時候最好加上，減小一些代碼不規範引發的錯誤。 4 5 /*模塊說明：dorseyAn做爲一切處理函數的入口*/ 6 let dorseyAn=function(){ 7 return new dorseyAn.fn.init(); 8 }; 9 dorseyAn.fn=dorseyAn.prototype={ 10 constructor:dorseyAn, //接口名：是dorsey-animate的縮寫。意爲動畫 11 init:function(){ 12 return this; 13 }, 14 unfold:function(obj,animate,time){ //2018-01封裝（初級）動畫展開函數，支持動畫自定義，如展開方式，展開過程持續時間 15 if(obj.css("visibility")==="hidden"){ 16 obj.css("visibility","visible"); 17 obj.css("transform",animate+" scale(0)"); 18 obj.css("transform"); 19 obj.css("transition",time); 20 obj.css("transform",""); 21 } 22 obj.css("transform",""); 23 }, 24 }; 25 dorseyAn=dorseyAn.fn.init.fn=dorseyAn.fn; 26 win.dorseyAn=dorseyAn; 27 })(window);
二、dorseyHf：函數處理
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 //2018-05-25封裝（初級）：用於dorsey音樂播放器音樂盒上的一些時間顯示處理，注意傳入的參數是以秒爲單位 23 timeHandle:function(times,flag){//這種方式仍是不太好，暫時先這樣 24 var time; 25 flag==="minute"?time=parseInt(times/60)%60:(flag==="second"?time=parseInt(times%60): 26 (flag==="hour"?time=parseInt(times/3600)%24:null)); 27 time<10?time="0"+time:time; 28 return time; 29 }, 30 timeHandle1:function(times){ 31 }, 32 dc_ajax_g:function(url,fnSucceed,preObj,fnFail){//ajax獲取操做 33 /** 34 * url：能夠是後臺接口，json數據，也能夠是json文件位置 35 * fnSucceed：ajax獲取成功後的操做 36 * preObj：預加載，ajax因爲要與後臺服務器作交互，這須要時間，特別是先後交互數據較大時，用於提醒用戶 37 * 如今在作加載，請稍後...通常是一個gif，或者乾脆一個請稍後都行，注意的是基於JQuery的$(select)對象。 38 * fnFail：ajax獲取失敗後返回的操做，通常相似於404這樣的東西。 39 * */ 40 preObj.css("display","block"); 41 setTimeout(function(){ 42 var oAjax = new XMLHttpRequest(); 43 oAjax.open('GET',url,true); 44 oAjax.send(); 45 oAjax.onreadystatechange=function(){ 46 if(oAjax.readyState==4){ 47 if(oAjax.status==200){ 48 fnSucceed(oAjax.responseText);//獲取響應 49 preObj.css("display","none"); 50 } 51 else{ 52 if(fnFail){ 53 fnFail(oAjax.status); 54 } 55 } 56 } 57 }; 58 },1500);//這個延遲最好改成0，或者乾脆把setTimeout去掉，這樣加的緣由是方便那些ajax獲取過快的 59 // 用戶能夠查看到這個預加載的效果。 60 } 61 }; 62 dorseyHf=dorseyHf.fn.init.fn=dorseyHf.fn; 63 win.dorseyHf=dorseyHf; 64 })(window);
後續每一個模塊寫好了會逐步更新，等項目最終完畢了會掛載到github，各位到時可自行下載。
相關文章
- 1. 基於Qt的仿酷狗音樂播放器設計（一）
- 2. Qt/C++ 模仿 酷狗音樂播放器Qt/C++ 模仿 酷狗音樂播放器
- 3. 基於Qt的仿酷狗音樂播放器設計（二）
- 4. Qt打造音樂播放器
- 5. 【項目】H5打造可視化音樂播放器
- 6. FFmpeg - 打造一款萬能的音樂播放器
- 7. 如何用vue打造一個移動端音樂播放器
- 8. 教你用樹莓派Python打造一個音樂播放器
- 9. Hide-Music-Player 一個完整的音樂播放器
- 10. 使用純QML寫的模仿的酷狗音樂播放器
- 更多相關文章...
- • Mozilla 項目 - 瀏覽器信息
- • PHP 完整表單實例 - PHP教程
- • NewSQL-TiDB相關
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
