整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。
官网的 slogan 如下：
Build 30 things in 30 days with 30 tutorial No Frameworks × No Compilers × No Libraries × No Boilerplate
现在你看到的是这系列指南的第 1 篇 - JavaScript 音乐鼓
模拟一个音乐鼓的效果。当用户按下 ASDFGHJKL 这几个键时，页面上与字母对应的元素变大，边框变色（动画效果），播放对应的音乐。
来一张效果图：
打开index-START.html文件：
知识点分析：
页面html中的数据属性（data-xxx）
键盘事件处理
根据数据属性选择相对应的元素
播放声音
样式修改
添加键盘事件监听。在windows上添加keydown事件。
keydown事件回调处理逻辑
（1）获取对应事件的keyCode
(2) 使用querySelector查找对应data-key=keyCode的元素
（3）处理元素，播放音频，添加样式
div.key添加动画结束transitionened事件处理来处理动画结束后的样式还原
ES6 中const 声明只读常量。
`${变量}`: 模板字面量（Template literals）。注意用反引号，变量用${}
forEach 与箭头函数
每次播放音效之后，需设置播放时间为0。
主要处理：重复按键。
动事结束后需要移除样式。
关注“教授学苑”，期待带给你快乐的开发知识.
款UI界面非常简洁美观的html5小型网页mp3音乐播放器开发，暂停播放、歌曲切换、进度条等基本功能都有。
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Music Player | Audio Player </title> <!--字体图标样式--> <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.3.1/css/solid.css'> <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css'> <!--布局样式--> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- Tracks used in this music/audio player application are free to use. I downloaded them from Soundcloud and NCS websites. I am not the owner of these tracks. Please don't create new pen by just copying and pasting code from this pen ( as I have seen some of them ), if you do that then don't forget to link back to this original pen. If you want to copy this pen then simply use the Fork button. Thank you --> <div id="app-cover"> <div id="bg-artwork"></div> <div id="bg-layer"></div> <div id="player"> <div id="player-track"> <div id="album-name"></div> <div id="track-name"></div> <div id="track-time"> <div id="current-time"></div> <div id="track-length"></div> </div> <div id="s-area"> <div id="ins-time"></div> <div id="s-hover"></div> <div id="seek-bar"></div> </div> </div> <div id="player-content"> <div id="album-art"> <img src="img/1.jpg" class="active" id="_1"> <img src="img/2.jpg" id="_2"> <img src="img/3.jpg" id="_3"> <img src="img/4.jpg" id="_4"> <img src="img/5.jpg" id="_5"> <div id="buffer-box">缓冲…</div> </div> <div id="player-controls"> <div class="control"> <div class="button" id="play-previous"> <i class="fas fa-backward"></i> </div> </div> <div class="control"> <div class="button" id="play-pause-button"> <i class="fas fa-play"></i> </div> </div> <div class="control"> <div class="button" id="play-next"> <i class="fas fa-forward"></i> </div> </div> </div> </div> </div> </div> </body> </html>
大家需要这个项目css代码，js，图片做练习的可以找我免费领取，如果大家不怕麻烦可以关注我后私信我“前端学习资料”几个字 找我领取 24小时在线！
节概览：
这一章主要分享两个东西，分别是进度条和音轨。进度条相对来说比较简单，于是先讲。
这是上一次绘制好的音乐播放器，本节也在它的基础上进行完善。
对于进度条，它可以实时地展示音乐的进度，相信大家都不陌生。
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;
}
我们希望让它紧挨着播放器屏幕的底部，只需要给它一个定位就行了。关于元素的定位，在之前的章节中我已经详细地讲过，所以在这里就不再赘述了。
position: absolute; bottom:0;
下来了。
我们将该区域分为上下两块
.music .screen .progress .time {
border-bottom:1px solid #fff; /*演示用，为了看清楚上下元素块的界限*/
height:20px; /*高度为父盒子的一半*/
line-height:20px; /*为了让文字垂直居中*/
text-align: right; /*文字右对齐*/
}
加上一个测试的时间数据：
<div class='time'>1:30</div>
确认没问题后，把背景色和边框都去掉。同时调色和优化一下：
.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.动态获取变化的时间
一步一步来，接下来我们先拿到正在播放的时间：
/**
* 当音频时间正常更新的时候
*/
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你可以理解为一个监听事件，每次时间更新的时候，就会自动进入里面的逻辑。
在图中可以很清晰地看到，我们已经能拿到正在播放的时间了。
接下来，我们将这个动态变化的时间在屏幕上显示出来。
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) + "%";
有了百分比，进度条其实也就有了。我们现在将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) + "%";
成功了，进度条就这么产生了。其中最关键的一点就是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;
}
2. 画第一条音轨
<div id='trackBox' class="trackBox">
<i class='items'></i>
</div>
.trackBox .items {
position: absolute;
width:10px;
height:100px;
background:#eee;
}
我们希望音轨靠着下方，并且它们之间能有一个区分，于是添加这两个属性：
bottom:0px; border: 1px solid #ccc;
OK，下来了。
2. 画所有的音轨
一个音轨肯定不够，我们需要根据音轨盒子的宽度和每一条音轨的宽度，来计算出一共需要多少条音轨：
/*获取音轨盒子*/
var trackBox=utils.dom('#trackBox');
/*音轨盒子的宽度*/
var maxWidth=trackBox.clientWidth;
/*音轨的单个宽度*/
var singleWidth=10;
/*计算音轨的最大数量*/
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. 通过随机数让音轨动起来
之前的章节 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);
效果：
原理就是用了一个js定时器，每隔200毫秒就改变所有音轨的高度，当然，高度是一个随机数值。
至于音轨和播放器的对接，虽然我已经写好，并且已经集成到musicBox里面，但是里面牵扯到比较多的知识点，写起来需要很多时间，所以暂且先放一放吧。
音乐播放器至此算是完成了一个1.0版本，以后看情况我会继续将这个案例更新下去，甚至还可能对接后台，连数据库等等。
在工作的日子里，我曾经迷茫过，尤其是刚开始做编程的工作时，非常迷茫。
每天都是增删改查，增删改查，就觉得很没意思。
一段时间下来，我开始迷茫了，不知道自己该学一些什么东西。
感觉技术太多，什么都想学，却又怕没时间。
在这个信息爆炸、日新月异的时代，技术更新得非常快，很多人都在各种新技术的浪潮下变得不知所措。我就有这样的体会，于是看各种书，各种视频，生怕自己跟不上时代的节奏。
可是，我一直以来都忽略了一个重点，那就是——我是否真的对这个行业感兴趣？
如果在几年前，我会说是的，正因为对计算机的兴趣，我才会放弃之前所学的专业，踏入 Java 、JavaScript 的坑中。
再后来，我发现一个道理，不论你现在的工作是什么，都请尽可能地去爱上他。不要为了生计而去做一份工作，如果实在办不到的话，就给自己撒一个美丽的谎言吧。
不然的话，软件开发到了后期你会很迷茫的。
给自己一个温馨的微笑，学着热爱这个行业，这个工作，就是对自己最大的奖赏。
享受编程的乐趣，怀着感恩的心去体会每一天生活中的细节。
*请认真填写需求信息，我们会在24小时内与您取得联系。
