本节概览：

  这一章主要分享两个东西，分别是进度条和音轨。进度条相对来说比较简单，于是先讲。

  这是上一次绘制好的音乐播放器，本节也在它的基础上进行完善。

  进度条

  对于进度条，它可以实时地展示音乐的进度，相信大家都不陌生。

  1.绘制进度条

  我们在按钮区的上面，也就是屏幕底部的区域绘制进度条。

  上代码：

  <pre>

</pre>

  代码中progress的部分就是我们需要添加的进度条区域。

  给它宽度、高度和背景色：

  <pre>.music .screen .progress {
width:100%;
height:40px;
background:#ccc;
}
</pre>

  我们希望让它紧挨着播放器屏幕的底部，只需要给它一个定位就行了。关于元素的定位，在之前的章节中我已经详细地讲过，所以在这里就不再赘述了。

  <pre>position: absolute;
bottom:0;
</pre>

  下来了。

  我们将该区域分为上下两块

  <pre>.music .screen .progress .time {
border-bottom:1px solid #fff; /演示用，为了看清楚上下元素块的界限/
height:20px; /高度为父盒子的一半/
line-height:20px; /为了让文字垂直居中/
text-align: right; /文字右对齐/
}
</pre>

  加上一个测试的时间数据：

  <pre>1:30
</pre>

  确认没问题后，把背景色和边框都去掉。同时调色和优化一下：

  <pre>.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;
}
</pre>

  这样就好看多了吧。

  2.动态获取变化的时间

  一步一步来，接下来我们先拿到正在播放的时间：

<p><pre>

musicBox.musicDom.ontimeupdate = function(){
var currentTime = Math.floor(this.currentTime); //获取当前时间
var m = parseInt(currentTime / 60);//分钟
var s = parseInt(currentTime % 60);//秒钟
var time = (m