上一節(jié)傳送門：http://www.reibang.com/p/f6f77d6d714f
本節(jié)概覽：
- 進度條
- 音軌原理
這一章主要分享兩個東西淑际，分別是進度條和音軌畏纲。進度條相對來說比較簡單，于是先講春缕。
這是上一次繪制好的音樂播放器盗胀，本節(jié)也在它的基礎(chǔ)上進行完善。
進度條
對于進度條锄贼，它可以實時地展示音樂的進度票灰，相信大家都不陌生。
1.繪制進度條
我們在按鈕區(qū)的上面宅荤，也就是屏幕底部的區(qū)域繪制進度條屑迂。
上代碼：
<body>
<div id='music' class='music'>
<div class='screen'>
<i id='music-icon' class="iconfont icon-yinle"></i>
<div class='progress'>
<div class='time'></div>
<div class='bar'></div>
</div>
</div>
<div class='buttons'>
<i id='prev' class="iconfont icon-icon"></i>
<i id='play' class="iconfont icon-bofanganniu"></i>
<i id='pause' class="iconfont icon-zanting" style="display:none"></i>
<i id='next' class="iconfont icon-icon1"></i>
</div>
<span id='info' class='info'></span>
</div>
</body>
代碼中progress的部分就是我們需要添加的進度條區(qū)域。
給它寬度冯键、高度和背景色：
.music .screen .progress {
width:100%;
height:40px;
background:#ccc;
}
我們希望讓它緊挨著播放器屏幕的底部惹盼，只需要給它一個定位就行了。關(guān)于元素的定位惫确，在之前的章節(jié)中我已經(jīng)詳細地講過手报，所以在這里就不再贅述了。
position: absolute;
bottom:0;
下來了改化。
我們將該區(qū)域分為上下兩塊
.music .screen .progress .time {
border-bottom:1px solid #fff; /*演示用掩蛤，為了看清楚上下元素塊的界限*/
height:20px; /*高度為父盒子的一半*/
line-height:20px; /*為了讓文字垂直居中*/
text-align: right; /*文字右對齊*/
}
加上一個測試的時間數(shù)據(jù)：
<div class='time'>1:30</div>
確認沒問題后，把背景色和邊框都去掉陈肛。同時調(diào)色和優(yōu)化一下：
.music .screen .progress {
width:100%;
height:40px;
position: absolute;
bottom:0;
}
.music .screen .progress .time {
color: #fff;
height:20px;
line-height:20px; /*為了讓時間垂直居中*/
text-align: right; /*文字右對齊*/
padding-right: 10px;
}
這樣就好看多了吧揍鸟。
2.動態(tài)獲取變化的時間
一步一步來，接下來我們先拿到正在播放的時間：
/**
* 當音頻時間正常更新的時候
*/
musicBox.musicDom.ontimeupdate = function(){
var currentTime = Math.floor(this.currentTime); //獲取當前時間
var m = parseInt(currentTime / 60);//分鐘
var s = parseInt(currentTime % 60);//秒鐘
var time = (m<10?("0"+m):m)+":"+(s<10?("0"+s):s); //格式化
console.log(time); //打印出來看看
}
ontimeupdate你可以理解為一個監(jiān)聽事件燥爷，每次時間更新的時候蜈亩，就會自動進入里面的邏輯懦窘。
在圖中可以很清晰地看到，我們已經(jīng)能拿到正在播放的時間了稚配。
接下來畅涂，我們將這個動態(tài)變化的時間在屏幕上顯示出來。
document.getElementsByClassName('time')[0].innerHTML = time;
嗯道川，這樣就行了午衰。
2.計算百分比
// 百分比 = 當前時長 ÷ 總時長 × 100%
var total = this.duration;//總時長
console.log(currentTime + '=======' + total);
document.getElementsByClassName('time')[0].innerHTML = Math.floor(currentTime / total * 100) + "%";
有了百分比，進度條其實也就有了冒萄。我們現(xiàn)在將bar的樣式加上臊岸，寬度默認0%
.music .screen .progress .bar {
height:20px;
background: #eee;
width:0%;
opacity: 0.6;
}
然后動態(tài)改變寬度：
var total = this.duration;
document.getElementsByClassName('bar')[0].style.width = Math.floor(currentTime / total * 100) + "%";
成功了，進度條就這么產(chǎn)生了尊流。其中最關(guān)鍵的一點就是audio標簽元素自帶的ontimeupdate 事件帅戒，我們可以在里面獲取總時長和當前時長，然后就可以計算出百分比崖技，通過給div動態(tài)設置寬度來實現(xiàn)進度條的效果逻住。
考慮到篇幅，我本章就不單獨封裝插件了迎献，將進度條集成到我們的musicBox里面瞎访，還需要用到回調(diào)函數(shù)等一系列的知識點。
音軌
1. 繪制音軌盒子
<div id='music' class='music'>
<div id='trackBox' class="trackBox"></div>
<div class='screen'>
<i id='music-icon' class="iconfont icon-yinle"></i>
<div class='progress'>
<div class='time'></div>
<div class='bar'></div>
</div>
</div>
<div class='buttons'>
<i id='prev' class="iconfont icon-icon"></i>
<i id='play' class="iconfont icon-bofanganniu"></i>
<i id='pause' class="iconfont icon-zanting" style="display:none"></i>
<i id='next' class="iconfont icon-icon1"></i>
</div>
<span id='info' class='info'></span>
</div>
為了方便定位吁恍，我們將 trackBox 畫在music盒子里面扒秸。
.trackBox {
position:absolute;
width:400px;
height:220px;
border: 1px solid #ccc;
z-index: 3;
background: #333;
left:210px;
top : -2px;
border-radius: 6px;
}
2. 畫第一條音軌
<div id='trackBox' class="trackBox">
<i class='items'></i>
</div>
.trackBox .items {
position: absolute;
width:10px;
height:100px;
background:#eee;
}
我們希望音軌靠著下方，并且它們之間能有一個區(qū)分冀瓦，于是添加這兩個屬性：
bottom:0px;
border: 1px solid #ccc;
OK伴奥，下來了。
2. 畫所有的音軌
一個音軌肯定不夠翼闽，我們需要根據(jù)音軌盒子的寬度和每一條音軌的寬度渔伯，來計算出一共需要多少條音軌：
/*獲取音軌盒子*/
var trackBox = utils.dom('#trackBox');
/*音軌盒子的寬度*/
var maxWidth = trackBox.clientWidth;
/*音軌的單個寬度*/
var singleWidth = 10;
/*計算音軌的最大數(shù)量*/
var len = Math.floor(maxWidth / singleWidth) ;
alert('音軌盒子最多盛放' + len + '條音軌');
//拼接音軌
var tracks = "";
for(var i = 0;i < len; i++){
/*計算位置*/
var left = 10 * i + 'px';
tracks += "<i class='items' style='left:"+left+"'></i>";
}
trackBox.innerHTML = tracks;
拼接后的效果：
2. 通過隨機數(shù)讓音軌動起來
之前的章節(jié) js常用方法和一些封裝（2） -- 隨機數(shù)生成 中，正好有一個隨機數(shù)的方法肄程，所謂養(yǎng)兵千日，用兵一時啊选浑。
我們把那個隨機數(shù)的方法添加到工具包：
util.js
randomNum : function (num){
return Math.floor(Math.random()*(num+1));
}
測試：
//模擬音軌動畫
setInterval(function(){
for(var i = 0;i < len; i++){
console.info(i);
document.getElementsByClassName('items')[i].style.height = utils.randomNum(110) + 'px';
}
},200);
效果：
原理就是用了一個js定時器蓝厌，每隔200毫秒就改變所有音軌的高度，當然古徒，高度是一個隨機數(shù)值拓提。
至于音軌和播放器的對接，雖然我已經(jīng)寫好隧膘，并且已經(jīng)集成到musicBox里面代态，但是里面牽扯到比較多的知識點寺惫，寫起來需要很多時間，所以暫且先放一放吧蹦疑。
感悟
音樂播放器至此算是完成了一個1.0版本西雀，以后看情況我會繼續(xù)將這個案例更新下去，甚至還可能對接后臺歉摧，連數(shù)據(jù)庫等等艇肴。
在工作的日子里，我曾經(jīng)迷茫過叁温，尤其是剛開始做編程的工作時再悼，非常迷茫。
每天都是增刪改查膝但，增刪改查冲九，就覺得很沒意思。
一段時間下來跟束，我開始迷茫了莺奸，不知道自己該學一些什么東西。
感覺技術(shù)太多泳炉，什么都想學憾筏，卻又怕沒時間。
在這個信息爆炸花鹅、日新月異的時代氧腰，技術(shù)更新得非常快刨肃，很多人都在各種新技術(shù)的浪潮下變得不知所措古拴。我就有這樣的體會，于是看各種書真友，各種視頻黄痪，生怕自己跟不上時代的節(jié)奏。
可是盔然，我一直以來都忽略了一個重點桅打，那就是——我是否真的對這個行業(yè)感興趣？
如果在幾年前愈案，我會說是的挺尾，正因為對計算機的興趣烦周，我才會放棄之前所學的專業(yè)冈敛，踏入 Java 、JavaScript 的坑中振乏。
再后來，我發(fā)現(xiàn)一個道理魂挂，不論你現(xiàn)在的工作是什么甫题，都請盡可能地去愛上他。不要為了生計而去做一份工作涂召，如果實在辦不到的話坠非，就給自己撒一個美麗的謊言吧。
不然的話芹扭，軟件開發(fā)到了后期你會很迷茫的麻顶。
給自己一個溫馨的微笑，學著熱愛這個行業(yè)舱卡，這個工作辅肾，就是對自己最大的獎賞。
享受編程的樂趣轮锥，懷著感恩的心去體會每一天生活中的細節(jié)矫钓。
本章結(jié)束 ...
剽悍一小兔，電氣自動化畢業(yè)舍杜。
參加工作后對計算機感興趣新娜，深知初學編程之艱辛。
希望將自己所學記錄下來既绩，給初學者一點幫助概龄。
免責聲明： 博客中所有的圖片素材均來自百度搜索，僅供學習交流饲握，如有問題請聯(lián)系我私杜，侵立刪，謝謝救欧。
