前言:
如今我们对“html做一个简易音乐播放器怎么做”大概比较关注,大家都需要分析一些“html做一个简易音乐播放器怎么做”的相关知识。那么小编在网络上搜集了一些有关“html做一个简易音乐播放器怎么做””的相关内容,希望各位老铁们能喜欢,小伙伴们一起来学习一下吧!本节概览:
进度条音轨原理
这一章主要分享两个东西,分别是进度条和音轨。进度条相对来说比较简单,于是先讲。
这是上一次绘制好的音乐播放器,本节也在它的基础上进行完善。
进度条
对于进度条,它可以实时地展示音乐的进度,相信大家都不陌生。
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 的坑中。
再后来,我发现一个道理,不论你现在的工作是什么,都请尽可能地去爱上他。不要为了生计而去做一份工作,如果实在办不到的话,就给自己撒一个美丽的谎言吧。
不然的话,软件开发到了后期你会很迷茫的。
给自己一个温馨的微笑,学着热爱这个行业,这个工作,就是对自己最大的奖赏。
享受编程的乐趣,怀着感恩的心去体会每一天生活中的细节。
标签: #html做一个简易音乐播放器怎么做