zepto+less写QQ音乐播放界面，进度条同步，歌词同步高亮等等(带注释，可参考可直接使用)

这是效果图，小编截下来的是静态图片，真是都是可以动的

不多说，直接上代码，注释都写在代码里清清楚楚

less

@sizeMan:100%;
//关键帧动画函数
.keyframes(@name:move,@content){
//  @name:动画名，@content：动画内容@keyframes @name {@content();}
}html{font-size: 100px;height: @sizeMan;
}
body{height: @sizeMan;
}.container{height:@sizeMan;position: relative;.backgroundImg,.bg{position: absolute;width: @sizeMan;height: @sizeMan;z-index: -2;}.backgroundImg{background: url("../img/myDream.jpg");background-size: cover;//滤镜：设置模糊度filter: blur(7px);}.bg{background-color: rgba(0,0,0,0.3);}//头部.header{width: @sizeMan;height: 2rem;background-color: rgba(0,0,0,.2);padding: .3rem;//padding不改变整盒宽高box-sizing: border-box;display: flex;color: white;//定义一个关键帧动画.keyframes(move,{0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)}});img{width: 1.2rem;height: 1.2rem;}div{margin-left: 5px;p:nth-of-type(1){font-size: .45rem;}}.musicBtn{width: .6rem;height: .6rem;background: url("../img/music.svg") no-repeat;background-size: cover;position: relative;top: .3rem;left: 3.7rem;&.select{//调用关键帧动画animation: move 1s linear 0s infinite;}}}//主体.main{height: 9.1rem;padding: .2rem;color: rgba(255,255,255,.5);font-size: .4rem;overflow: hidden;box-sizing: border-box;position: relative;letter-spacing: .04rem;.wrapper{width: @sizeMan;position: absolute;top: 0;left: 0;}p{width: @sizeMan;height: .8rem;text-align: center;line-height: .8rem;&.select{color: #31c27c;}}}//尾部.footer{color: white;box-sizing: border-box;.progress{width: @sizeMan;//.probg的父元素这里没有设置padding-top，所以后面设置.probg的margin的时候会传递给.progress//解决方法就是给一个overflow：hidden（原因就是父元素没有设置padding-top时子元素的margin-top会发生传递）overflow: hidden;position: relative;margin-bottom: .3rem;span{position: absolute;top: 0;}.current{left: .3rem;}.duration{right: .3rem;}.probg{width: 65%;margin: .15rem auto;background: rgba(2552,255,255,0.5);height: .04rem;.already{height: 100%;background-color: #31c27c;width: 10%;}}}a{display: block;width: 4.5rem;height: 1rem;background:url("../img/sprite_play.png") no-repeat 0.2rem -5.84rem #31c27c;background-size: .8rem 7rem;color: white;border-radius: .5rem;font-size: .4rem;text-align: center;line-height: 1rem;margin: auto;}}
}

html

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Title</title><link rel="stylesheet" href="css/reset.min.css"><link rel="stylesheet/less" href="css/index1.less"><script>//手机屏幕适配~(function (disn) {function getComputedFont() {let winW=document.documentElement.clientWidth;document.documentElement.style.fontSize=winW/disn*100+'px';}getComputedFont();window.addEventListener('resize',getComputedFont);window.addEventListener('orientationchange',getComputedFont);})(750)</script><script src="js/less-2.5.3.min.js"></script>
</head>
<body>
<section class="container"><audio src="./img/myDream.mp3"  preload="none" id="audio"></audio><!--背景图--><div class="backgroundImg"></div><!--背景图的蒙层--><div class="bg"></div><header class="header" id="header"><img src="img/myDream.jpg" alt=""><div class="song"><p>我的梦</p><p>张靓颖</p></div><a href="javascript:;" class="musicBtn" id="musicBtn"></a></header><main class="main" id="main"><div class="wrapper">
<!--            <p>就让光芒折射泪湿的瞳孔</p>-->
<!--            <p>就让光芒折射泪湿的瞳孔</p>-->
<!--            <p>就让光芒折射泪湿的瞳孔</p>-->
<!--            <p>就让光芒折射泪湿的瞳孔</p>-->
<!--            <p>就让光芒折射泪湿的瞳孔</p>-->
<!--            <p>就让光芒折射泪湿的瞳孔</p>-->
<!--            <p>就让光芒折射泪湿的瞳孔</p>-->
<!--            <p>就让光芒折射泪湿的瞳孔</p>--></div></main><footer class="footer" id="footer"><div class="progress" id="progress"><span class="current">00:00</span><span class="duration">00:00</span><div class="probg" id="probg"><div class="already"></div></div></div><a href="javascript:;" class="down" id="down">下载这首音乐</a></footer>
</section><!--
audio 是h5新增的标签，用来播放音频；
mp3
ogg
wav
m4a
// ...
（不支持amr格式的音频，npm上有一个库可以播放amr格式的音频）
如果有一天你接的需求中有音视频，要确认是什么格式，最好是mp3；如果不是mp3，谁来转（app或者服务端来转），如果前端来搞，体验会降级。
--><!--<audio src="img/myDream.m4a" controls autoplay preload="metadata"></audio>controls 启用audio的控制界面，如果不写，页面中将什么也不展示；autoplay 自动播放（iphone中不能用）preload 提前加载 auto 自动加载；none 不提前加载，播放时才加载；metadata 只加载音频的基本信息loop: 循环播放--><!--video的属性和audio基本相似，--><!--poster: 视频的封面图片<video src="http://www.w3school.com.cn/i/movie.ogg" poster="img/myDream.jpg" controls></video>--><!--视频流、音频流：不是一个具体的文件如果是播放流，一般服务端会提供给你一个 类似 rtmp://xxx.xx.com/dddd/xxx 的地址，把地址赋给audio和video的src属性；如果遇到不能用的情况，需要借助第三方的插件：video.js--><script src="js/zepto.min.js"></script><script src="js/index1.js"></script>

~(function () {//获取元素let $header = $('.header'),$main = $('.main'),$footer = $('.footer'),$musicBtn = $('.musicBtn'),$wrapper = $('.wrapper'),$current = $('.current'),$duration = $('.duration'),$already = $('.already'),audio = document.getElementById('audio');progress=document.getElementsByClassName('progress')[0];//step标识当前播放哪条歌词，top标识屏幕显示的部分，autoPlayTime定时器返回值用来控制播放以及暂停时的歌词高亮和时间的及时更新let step=0, top=0, autoPlayTime,autoPlay;init();//主入口函数function init() {//起始运行一次computendMain方法适配用户的手机屏幕，同时绑定resize事件适屏幕computendMain();window.addEventListener('resize',computendMain);//给音符按钮绑定事件btnEvent();ajax();}//动态设置main部分的高度()//浏览器可视区域的高-header的hight-footer的hightfunction computendMain() {let winH=document.documentElement.clientHeight,//可视窗口的高度heiderH=$header[0].offsetHeight,//header的高度footerH=$footer[0].offsetHeight;//footer的高度//计算出main的高度(单位是px，我们要设置rem长度，所以还需要进行一次转换)let curH=(winH-heiderH-footerH)/parseFloat(document.documentElement.style.fontSize)-0.5;//设置main的height$main.css('height',curH+'rem');}//发送请求获取数据以及数据绑定function ajax() {//发送请求$.ajax({url:"./json/lyric.json",type:'GET',error(err){console.log(err);},success({lyric}){//绑定数据bindHTML(lyric);}});//绑定数据function bindHTML(lyric) {//替换歌词中的空格,(,),-等特殊符号lyric=lyric.replace(/&#(\d+);/g,(quan,num)=>{//为什么*1？上面捕获的是字符串类型的数字，*1将其转为数字类型的数字switch (num*1) {case 32:return ' ';case 40:return '(';case 41:return ')';case 45:return '-';default:return quan;}})//拼接字符串模板let str=``,ary=[];// 这个字符串不能使用split(';')来进行分割，那么怎么办？可以借用字符串的replace替换来巧妙遍历// [00:16.68]迎着痛把眼中所有梦
这是一句歌词，按这个格式来捕获遍历lyric.replace(/\[(\d+):(\d+).(?:\d+)\]([^&#]+)
/g,(quan,start,end,lyric)=>{ary.push({start:start,end:end,lyric:lyric})});//遍历歌词数组动态添加歌词ary.forEach(item=>{str+=`<p data-min="${item['start']}" data-sec="${item['end']}">${item['lyric']}</p>`})$wrapper.html(str);//歌词加载完毕开启播放和按钮旋转audio.play();$musicBtn.addClass('select');}//实时检测播放进度autoPlay=function () {//每过一秒检测一次autoPlayTime=setInterval(changeTime,1000)};autoPlay();//检测播放进度更改歌词高亮以及播放时间的方法function changeTime() {//解构出audio元素的currentTime当前时间和duration结束时间let{currentTime, duration}=audio;if(currentTime>=duration){//播放完毕clearInterval(autoPlayTime);return;}//设置总时长$duration.text(changeTime(duration));//设置当前时长$current.text(changeTime(currentTime));//更改进度条$already.css('width',currentTime/duration*100+'%');//高亮歌词let $ps=$('.wrapper>p'),[min,sec]=changeTime(currentTime).split(':');$ps.each((idx,item)=>{if(item.getAttribute('data-min')===min&&item.getAttribute('data-sec')===sec){// $('.wrapper > p').filter(`[data-min="${min}"]`).filter(`[data-sec="${sec}"]`);//     这个filter方法是zepto中的方法，实现起来会更加的简单，上面的意思是先过滤data-min符合条件的出来//  然后再过滤出data-sec符合条件的出来$(item).addClass('select').siblings().removeClass('select');step++;if(step>4){top+=.8;$wrapper.css('top',-top+'rem');}}})//转换时间function changeTime(time) {//获取分钟以及秒let min = Math.floor(time / 60);let sec = Math.round(time - min * 60);//补零min < 10 && (min = '0' + min);sec < 10 && (sec = '0' + sec);return `${min}:${sec}`;}}}//给音符绑定事件。top是zepto中提供的手机触摸方法function btnEvent() {let deg;//用以记录暂停时按钮的旋转角度$musicBtn.tap(function () {//判断当前是播放还是停止状态,audio自带的paused属性检测是否处于暂停状态，暂停状态返回true不是返回fasleif(audio.paused){//暂停状态，play继续播放audio.play();//按钮添加旋转$musicBtn.addClass('select');//添加上次暂停角度$musicBtn.css('transform',deg);//运行时间函数检测已放时间方法autoPlay();}else{//播放状态,pause方法暂停播放audio.pause();//清除检测方法clearInterval(autoPlayTime);//保存旋转的角度deg=getComputedStyle($musicBtn[0])['transform'];//移除按钮旋转的动画$musicBtn.removeClass('select');}})}})();

全部文件已上传百度云盘：https://pan.baidu.com/s/1We8dQfGrBQJIwiSkj_STgQ，提取码：pq8t

zepto+less写QQ音乐播放界面，进度条同步，歌词同步高亮等等(带注释，可参考可直接使用)相关推荐

仿QQ音乐播放界面（已实现主要功能）
源码地址:https://github.com/yeaper/MusicPlayer 因项目需要,实现的功能类似QQ音乐播放界面使用 kotlin 代替 Java 主要功能: 1.播放.暂停音乐 2 ...
Vue2.0+SVG实现音乐播放圆形进度条组件，传入实时百分比实现圆圈进度动画效果
vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果需求分析: 类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度. progress-cir ...
android音乐播放器进度条误差研究
2019独角兽企业重金招聘Python工程师标准>>> 如何做一个"流畅"而且"准确"的进度条? 流畅!由两个条件决定,更新的频率和更新的 ...
android音乐播放器进度条研究
如何做一个"流畅"而且"准确"的进度条? 流畅!由两个条件决定,更新的频率和更新的精度频度和精度要相适应,才能保证流畅,并不是精度越高越好,也不是频度越高 ...
android实现音乐播放器(进度条)
|--效果图 |--依赖3个对象 MediaPlayer:实现音乐播放,暂停,缓冲. SeekBar:滑动的进度条. java.util.Timer:定时器,时时更新进度条. |--main. ...
MediaPlayer 音乐播放器进度条
今天学渣研究了一下使用MediaPlayer播放音乐时添加进度条,进度条现在用的是android自带的seekbar,后期会跟换UI的,在之前能够播放音乐的基础上,现在添加的主要功能有两个: 1实时显 ...
android 音乐播放圆形进度条
上次上传gif后没动不知道这次会不会动在依次吐槽 csdn的博客模板原来要选择无水印我的天 gif才成功上次写了一个音乐播放器今天吧里面的一个效果写出来写博客的习惯要慢慢养成 ...
音乐播放，进度条，上一首下一首，暂停/播放
recycle_item布局: <?xml version="1.0" encoding="utf-8"?><LinearLayout xml ...
AndroidStudio音乐播放器进度条和歌曲时间的操作
1.首先,我们需要使用在activity_main布局中定义好一个SeekBar和两个ListView,SeekBar表示进度条,两个ListView分别用来表示当前的时间和歌曲的总时间. 2.在Mu ...

zepto+less写QQ音乐播放界面，进度条同步，歌词同步高亮等等(带注释，可参考可直接使用)

zepto+less写QQ音乐播放界面，进度条同步，歌词同步高亮等等(带注释，可参考可直接使用)相关推荐

最新文章

热门文章