qq音乐播放小Demo

效果图

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="css/reset.min.css"><link rel="stylesheet" href="css/index.css"><script>(function () {function computedFont() {let winW = document.documentElement.clientWidth;document.documentElement.style.fontSize = winW/750*100+"px";}computedFont();window.addEventListener("resize",computedFont)})();</script>
</head>
<body>
<div  class="container"><audio src="img/myDream.m4a" id="music"></audio><div class="imgBg"></div><div class="bg"></div><header class="header"><div class="content"><img src="img/myDream.jpg" alt=""><h3><span>我的梦</span><span>张靓颖</span></h3></div><a href="javascript:;" id="musicBtn"></a></header><main class="main"><div class="wrap"><p>明天会更好</p><p>明天会更好</p><p>明天会更好</p><p>明天会更好</p><p>明天会更好</p><p>明天会更好</p><p>明天会更好</p><p>明天会更好</p><p>明天会更好</p></div></main><footer class="footer"><div class="progress"><div class="proBg"><div class="lineBg"></div></div><span id="left">00:00</span><span id="right">00:00</span></div><a href="##" id="down">下载这首歌曲</a></footer>
</div>
<script src="js/zepto.min.js"></script>
<script src="js/index1.js"></script>
</body>
</html>

css


html,body{width:100%;height:100%;
}
.container{width:100%;height:100%;
}
.container .imgBg,.container  .bg{position: absolute;width:100%;height:100%;left:0;top:0;z-index:-2;
}
.container .imgBg{background: url("../img/myDream.jpg") no-repeat;background-size: cover;/*模糊度*/filter:blur(7px);
}
.container  .bg{background: rgba(0,0,0,0.2);
}
/*header的样式*/
.header{width:100%;padding:0.3rem;box-sizing: border-box;background: rgba(0,0,0,0.3);position: relative;
}
.header .content img{width:1.2rem;height:1.2rem;
}
.header .content h3{display: inline-block;/* 把元素的顶端与行中最高元素的顶端对齐*/vertical-align: top;
}
.header .content span{color:white;display: block;
}
.header .content span:nth-child(1){font-size: 0.45rem;
}
.header #musicBtn{position: absolute;right:0.3rem;top:50%;margin-top: -0.3rem;display: inline-block;width:0.6rem;height:0.6rem;background: url("../img/music.svg") no-repeat;background-size:100% 100%;
}
.header #musicBtn.select{animation: move 2s linear infinite;
}
@keyframes move {from{transform: rotate(0deg);}to{transform: rotate(360deg);}
}
/*main部分*/
.main{width:100%;/* height:9rem; */padding:0.3rem;position: relative;overflow: hidden;box-sizing: border-box;
}
.main .wrap{position: absolute;width:96%;top:0;transition: all 0.5s linear;
}
.main .wrap  p{width:100%;text-align: center;line-height: 0.84rem;height:0.84rem;color:rgba(255,255,255,0.6);font-size: 0.4rem;
}
.main .wrap  p.select{color:#31C27C;
}
/*footer的样式*/
.footer{width:100%;position: relative;
}
.footer .progress{position: relative;
}
.footer .progress .proBg{width:65%;margin:auto;height:0.04rem;background: rgba(255,255,255,0.5);
}
.footer .progress .proBg .lineBg{height:0.04rem;width:0;background: #31C27C;
}
.footer .progress span{color:rgba(255,255,255,0.5);position: absolute;top:-0.15rem;
}
.footer .progress #left{left:0.5rem;
}
.footer .progress #right{right:0.5rem;
}
.footer #down{display: block;width:60%;height:1rem;line-height: 1rem;text-align: center;color:white;font-size: 0.4rem;border-radius: 0.5rem;margin:0 auto;background: url("../img/sprite_play.png") 0.2rem -5.86rem no-repeat #31C27C;background-size:0.8rem 7rem;
}

js

let music = $("#music")[0];
let timer;
//1. 计算出内容区的高度，动态设置
function computedMain(){// 用屏幕的高度-header的高度-footer的高度来计算main的高度；let winH = document.documentElement.clientHeight;let headerH = $(".header")[0].offsetHeight;let footerH = $(".footer")[0].offsetHeight;// 获取最新的fontSize值；let fontSize = parseFloat(document.documentElement.style.fontSize);// debuggerlet mainH  = (winH-headerH-footerH)/fontSize+"rem"; // console.log(mainH);$(".main").css("height",mainH);
}
computedMain();// 2.请求数据，并绑定数据
$.ajax({url:"./json/lyric.json",type:"get",async:false,success:function(data){// 将data中属性名是lyric的属性值传递给bindHtml;bindHtml(data.lyric);}
});// 3.数据绑定
function bindHtml(data){data=data.replace(/&#(\d+);/g,function(res,a){switch(a){case "32":return " ";case "40":return "(";case "41":return ")";case "45":return "-";}return res;});let arr = [];data.replace(/\[(\d+):(\d+).\d+\]([^&#]+)(?:(&#\d+))/g,function(res,a,b,val){arr.push({a,b,val});});// 循环准备好的数组，拼接字符串，并放入wrap这个元素中；let str=``;for(let i=0;i<arr.length;i++){let cur = arr[i];str+=`<p data-min="${cur.a}" data-sec="${cur.b}">${cur.val}</p>`}$(".wrap").html(str);music.addEventListener("canplay",function(){// 当音频加载完毕，会执行这个元素的canplay事件；$("#right").html(formate(music.duration));});
}
// 3.给按钮绑定点击事件；如果当前是暂停状态，就让其播放，如果是播放状态，就让其暂停
// tap： 没有延迟；
$("#musicBtn").tap(function(){if(music.paused){music.play();$(this).addClass("select");timer=setInterval(computedTime,100);return;}else{music.pause();$(this).removeClass("select");clearInterval(timer);return;}
});
function formate(time){// time : 是秒；返回一个分钟:秒let min = Math.floor(time/60);let sec = Math.floor(time%60);min = min<10?"0"+min:min;sec=sec<10?"0"+sec:sec;return min+":"+sec;
}
// audio :currentTime
let curT = 0;
let flag = 0;
function computedTime(){let curTime = music.currentTime;let duration = music.duration;let cur = formate(curTime);// "00:16"if(curTime>=duration){// 播放完以后的执行clearInterval(timer);$("#musicBtn").removeClass("select");$(".wrap").css("top", 0);return;}$("#left").html(cur);$(".lineBg").css("width",curTime/duration*100+"%");let min = cur.split(":")[0];let sec = cur.split(":")[1];// 获取到所有的p元素；let allP = document.getElementsByTagName("p");for(let i=0;i<allP.length;i++){let curP = allP[i];// 获取当前行分钟以及秒数let minP = curP.getAttribute("data-min");// 00  01let secP = curP.getAttribute("data-sec");// 让左下角的时间和这个行上的时间进行比较，如果相同，音乐已经播放到了这一行，加颜色if(min===minP&&sec===secP){// 只要这一行加//curP.removeAttribute("data-min");if(curP.className!=="select"){//console.log(curP.className);//flag++;$(curP).addClass("select").siblings().removeClass("select");// i : 第几个p元素；if(i>=6){curT-=0.84;$(".wrap").css("top",curT+"rem");}}}}}

json

{"retcode": 0,"code": 0,"subcode": 0,"type": 1,"songt": 0,"lyric": "[ti:《我的梦》]
[ar:张靓颖]
[al:]
[by:]
[offset:0]
[00:01.36]我的梦 (华为手机主题曲) - 张靓颖
[00:02.11]词：王海涛/张靓颖
[00:02.64]曲：Andy Love
[00:03.48]编曲：崔迪
[00:04.49]
[00:08.73]一直地一直地往前走
[00:11.65]
[00:13.02]疯狂的世界
[00:14.58]
[00:16.68]迎着痛把眼中所有梦
[00:20.52]
[00:21.03]都交给时间
[00:22.71]
[00:24.24]想飞就用心地去飞
[00:26.98]谁不经历狼狈
[00:30.68]
[00:31.60]我想我会忽略失望的灰
[00:34.99]拥抱遗憾的美
[00:39.05]我的梦说别停留等待
[00:43.94]就让光芒折射泪湿的瞳孔
[00:47.74]映出心中最想拥有的彩虹
[00:51.78]带我奔向那片有你的天空
[00:55.74]因为你是我的梦
[01:01.06]
[01:07.19]我的梦
[01:08.72]
[01:16.75]执着地勇敢地不回头
[01:20.29]
[01:21.05]穿过了黑夜踏过了边界
[01:24.87]路过雨路过风往前冲
[01:28.39]
[01:28.96]总会有一天站在你身边
[01:32.52]泪就让它往下坠
[01:35.00]溅起伤口的美
[01:38.60]
[01:39.55]哦别以为失去的最宝贵
[01:43.00]才让今天浪费
[01:47.04]我的梦说别停留等待
[01:51.93]就让光芒折射泪湿的瞳孔
[01:55.66]映出心中最想拥有的彩虹
[01:59.75]带我奔向那片有你的天空
[02:03.67]因为你是我的梦
[02:09.14]
[02:11.72]我的梦
[02:13.09]
[02:15.13]我的梦
[02:16.64]
[02:19.60]我的梦
[02:21.39]
[02:24.27]世界会怎么变化
[02:26.58]都不是意外
[02:28.33]记得用心去回答
[02:30.52]命运的精彩
[02:32.34]世界会怎么变化
[02:34.51]都离不开爱
[02:36.25]记得成长的对话
[02:38.28]
[02:39.11]勇敢地说我不再等待
[02:45.63]就让光芒折射泪湿的瞳孔
[02:49.75]映出心中最想拥有的彩虹
[02:53.74]带我奔向那片有你的天空
[02:57.73]因为你是我的梦
[03:02.71]
[03:05.51]我的梦
[03:07.32]
[03:09.20]我的梦
[03:14.12]因为你是我的梦"
}

qq音乐播放小Demo相关推荐

qq音乐（轮播图）详细介绍
目录 QQ音乐出续集了啊小伙伴们! 下面说一下这三块分别是怎么设置的额外一些细节的修改: 接下来展示一下我的代码部分 css样式 html代码 js代码: 今日金句 QQ音乐出续集了啊小伙伴 ...
如何用手机上的计算机弹音乐,如何使用手机qq音乐遥控电脑播歌
在qq音乐中,可以使用手机遥控电脑播放歌曲的功能,对于新用户来说,可能不知道具体的操作步骤,下面就让学习啦小编告诉你如何使用手机qq音乐遥控电脑播歌. 使用手机qq音乐遥控电脑播歌的方法首先手机要连 ...
虾米播播音乐墙html,WordPress音乐播放器插件Hermit X（支持网易云、QQ音乐、虾米等）...
Hermit X,使用 APlayer 前端播放器,Meting Framework & LWL API 后端支持的全新 WordPress 播放器现已问世! 特性支持直接调用网易云音乐. ...
vue 2.0系列QQ音乐播放器案例
我可能做了一个假的qq音乐demo, 本demo参考 https://y.qq.com 开发的,难怪跟网上其他人的案例界面不一样...Orz Build Setup git clone https:/ ...
android qq音乐布局,仿QQ音乐底部栏
最近在开发一款高仿QQ音乐播放器的Demo,遇到了一个问题,在QQ音乐主界面有一个常驻底部栏,底部栏中有一个可左右滑动切歌的组件,最后还是实现了效果,今天来回顾一下实现过程. 要实现的就是最下方的常驻 ...
Vue.js仿QQ音乐（移动端）
项目地址用电脑在线预览记得切换成手机端哟在线预览(￣3￣) 源码地址项目描述主要技术使用Vue.js实现单页应用使用Vue Router处理路由请求使用Vuex实现数据存储,管理组件间的 ...
iOS之基于FreeStreamer的简单音乐播放器(模仿QQ音乐)
代码地址如下: http://www.demodashi.com/demo/11944.html 天道酬勤前言作为一名iOS开发者,每当使用APP的时候,总难免会情不自禁的去想想,这个怎么做的?该 ...
qq动态页面变方格_腾讯QQ音乐9.7.5正式版更新：「歌手主页个人主页」界面全新改版...
IT之家12月23日消息今天,腾讯QQ音乐推送了v9.7.5正式版的更新,「歌手主页&个人主页」页面全新改版:「排行榜」新增榜单推荐,基于你的喜好为你推荐榜单:增加本地歌曲排行榜:「听歌识曲 ...
iOS开发手记－仿QQ音乐播放器动态歌词的实现
最近朋友想做个音乐App,让我帮忙参考下.其中歌词动态滚动的效果,正好我之前也没做过,顺便学习一下,先来个预览效果. 实现思路歌词常见的就是lrc歌词了,我们这里也是通过解析lrc歌词文件来获取其播 ...
模仿QQ音乐wap端
Net Music https://github.com/ITch8/NetMusic 模仿QQ音乐wap端实践中来学习Vue技术栈开发效果图体验开发技术栈 Vue + VueRouter ...

qq音乐播放小Demo

效果图

html

css

js

json

qq音乐播放小Demo相关推荐

最新文章

热门文章