《从案例中学习JavaScript》之酷炫音乐播放器(三)进度条音轨

上一节传送门:http://www.jianshu.com/p/f6f77d6d714f

本节概览:

  • 进度条
  • 音轨原理

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

Paste_Image.png

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

进度条

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

1.绘制进度条

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

<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的部分就是我们需要添加的进度条区域。

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

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

Paste_Image.png

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

position: absolute;
bottom:0;

Paste_Image.png

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

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

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

<div class='time'>1:30</div>

Paste_Image.png

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

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

Paste_Image.png

这样就好看多了吧。

2.动态获取变化的时间

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

/**
 * 当音频时间正常更新的时候
 */
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你可以理解为一个监听事件,每次时间更新的时候,就会自动进入里面的逻辑。

6.gif

在图中可以很清晰地看到,我们已经能拿到正在播放的时间了。

接下来,我们将这个动态变化的时间在屏幕上显示出来。

document.getElementsByClassName('time')[0].innerHTML = time;

6.gif

嗯,这样就行了。

2.计算百分比

// 百分比 = 当前时长 ÷ 总时长 × 100%
var total = this.duration;//总时长
console.log(currentTime + '=======' + total);
document.getElementsByClassName('time')[0].innerHTML = Math.floor(currentTime / total * 100) + "%";

6.gif

有了百分比,进度条其实也就有了。我们现在将bar的样式加上,宽度默认0%

.music .screen .progress .bar {
    height:20px;
    background: #eee;
    width:0%; 
    opacity: 0.6;
}

然后动态改变宽度:

var total = this.duration;
document.getElementsByClassName('bar')[0].style.width = Math.floor(currentTime / total * 100) + "%";

6.gif

成功了,进度条就这么产生了。其中最关键的一点就是audio标签元素自带的ontimeupdate 事件,我们可以在里面获取总时长和当前时长,然后就可以计算出百分比,通过给div动态设置宽度来实现进度条的效果。

考虑到篇幅,我本章就不单独封装插件了,将进度条集成到我们的musicBox里面,还需要用到回调函数等一系列的知识点。

音轨

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;
}

Paste_Image.png

2. 画第一条音轨

<div id='trackBox' class="trackBox">
    <i class='items'></i>
</div>
.trackBox .items {
    position: absolute;
    width:10px;
    height:100px;
    background:#eee;
}

Paste_Image.png

我们希望音轨靠着下方,并且它们之间能有一个区分,于是添加这两个属性:

bottom:0px;
border: 1px solid #ccc; 

Paste_Image.png

OK,下来了。

2. 画所有的音轨

一个音轨肯定不够,我们需要根据音轨盒子的宽度和每一条音轨的宽度,来计算出一共需要多少条音轨:

/*获取音轨盒子*/
var trackBox = utils.dom('#trackBox');
/*音轨盒子的宽度*/
var maxWidth = trackBox.clientWidth;
/*音轨的单个宽度*/
var singleWidth = 10;
/*计算音轨的最大数量*/
var len = Math.floor(maxWidth / singleWidth) ;
alert('音轨盒子最多盛放' + len + '条音轨');

Paste_Image.png

//拼接音轨
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;

拼接后的效果:

Paste_Image.png

2. 通过随机数让音轨动起来

之前的章节 js常用方法和一些封装(2) -- 随机数生成 中,正好有一个随机数的方法,所谓养兵千日,用兵一时啊。

我们把那个随机数的方法添加到工具包:

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);

效果:

6.gif

原理就是用了一个js定时器,每隔200毫秒就改变所有音轨的高度,当然,高度是一个随机数值。

至于音轨和播放器的对接,虽然我已经写好,并且已经集成到musicBox里面,但是里面牵扯到比较多的知识点,写起来需要很多时间,所以暂且先放一放吧。

感悟

音乐播放器至此算是完成了一个1.0版本,以后看情况我会继续将这个案例更新下去,甚至还可能对接后台,连数据库等等。

在工作的日子里,我曾经迷茫过,尤其是刚开始做编程的工作时,非常迷茫。

每天都是增删改查,增删改查,就觉得很没意思。

一段时间下来,我开始迷茫了,不知道自己该学一些什么东西。

感觉技术太多,什么都想学,却又怕没时间。

在这个信息爆炸、日新月异的时代,技术更新得非常快,很多人都在各种新技术的浪潮下变得不知所措。我就有这样的体会,于是看各种书,各种视频,生怕自己跟不上时代的节奏。

可是,我一直以来都忽略了一个重点,那就是——我是否真的对这个行业感兴趣?

如果在几年前,我会说是的,正因为对计算机的兴趣,我才会放弃之前所学的专业,踏入 Java 、JavaScript 的坑中。

再后来,我发现一个道理,不论你现在的工作是什么,都请尽可能地去爱上他。不要为了生计而去做一份工作,如果实在办不到的话,就给自己撒一个美丽的谎言吧。

不然的话,软件开发到了后期你会很迷茫的。

给自己一个温馨的微笑,学着热爱这个行业,这个工作,就是对自己最大的奖赏。

享受编程的乐趣,怀着感恩的心去体会每一天生活中的细节。

本章结束 ...

剽悍一小兔,电气自动化毕业。 参加工作后对计算机感兴趣,深知初学编程之艰辛。 希望将自己所学记录下来,给初学者一点帮助。

免责声明: 博客中所有的图片素材均来自百度搜索,仅供学习交流,如有问题请联系我,侵立删,谢谢。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT大咖说

手淘互动动效的探索

摘要 现在的营销活动,用一张简单的图片去吸引消费者已经远远不够,必须要有能给消费者带来视觉冲击的东西,或者在动画过程中提供更好的引导部分。手淘的前端团队经历了从...

49380
来自专栏企鹅号快讯

什么是“爬虫”技术?导致你买不到特价机票的原因

有“机票代理”公司正在利用“爬虫”技术,抢占航企官网放出的低价票,利用航企允许的账期反复订票、退订,直至将票加价卖出。有专家指出,利用“爬虫”技术从虚占到变现过...

22060
来自专栏较真的前端

前端学习——这十本书一定要看

31360
来自专栏web前端教室

大的方向上来讲,我觉得新人前端怎么学好?

image.png 作为一个加入刚刚加入WEB前端行业的新人,所面对的情况不再是以往那种先学HTML,再学CSS,然后再学JS,最后学jQuery,挣钱。不再是...

21970
来自专栏前端黑板报

适配iPhone X 的齐刘海

当苹果宣布发布他们的旗舰手机-- iPhone X 的时候,他们允诺将为未来移动设备设定新的标准。我们决定需要了解一些内容。 “屏幕再也不必是方...

26790
来自专栏黑泽君的专栏

去除高清视频锯齿几个方法

  在使用DV拍摄制作视频时,经常被网友问到一个问题——为什么我拍出的视频在电脑上播放时会出现锯齿现象?有人认识是电脑配置太低,有人认为是摄像机出了故障,有人认...

2.8K30
来自专栏阮一峰的网络日志

排版六原则

几天后,就收到了秋叶老师的来信,希望与我探讨一些设计问题。他写过一本畅销书《说服力-让你的PPT会说话》,眼下正在写续集。

11220
来自专栏目标检测和深度学习

教你做惊艳的学术PPT!!!

大学老师在日常教学中,需要制作大量的PPT课件。虽然这些老师都是各自专业的精英,但是对于制作好看的PPT课件而言,有时候却心有余而力不足。

21320
来自专栏九彩拼盘的叨叨叨

活动#1 秀出你的前端技能吧

我们会选出2位获奖者。1位是前端技能文章获得喜欢数最多的。另1位是前端管理小组选出写的最用心的。

10610
来自专栏钱塘大数据

【人工智能冲顶大会】AI学渣-学者-学霸-学神,测测你是哪个段位?

点击下方空白区域查看答案 ▼ 点击下方空白区域查看答案! ▼ 」 ---- 点击下方空白区域查看答案! ▼ 点击下方空白区域查看答案! ▼ ---- 点击下方空...

407110

扫码关注云+社区

领取腾讯云代金券