效果图
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{
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{
width:100%;
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{
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;
function computedMain(){
let winH = document.documentElement.clientHeight;
let headerH = $(".header")[0].offsetHeight;
let footerH = $(".footer")[0].offsetHeight;
let fontSize = parseFloat(document.documentElement.style.fontSize);
let mainH = (winH-headerH-footerH)/fontSize+"rem";
$(".main").css("height",mainH);
}
computedMain();
$.ajax({
url:"./json/lyric.json",
type:"get",
async:false,
success:function(data){
bindHtml(data.lyric);
}
});
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
});
});
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(){
$("#right").html(formate(music.duration));
});
}
$("#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){
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;
}
let curT = 0;
let flag = 0;
function computedTime(){
let curTime = music.currentTime;
let duration = music.duration;
let cur = formate(curTime);
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];
let allP = document.getElementsByTagName("p");
for(let i=0;i<allP.length;i++){
let curP = allP[i];
let minP = curP.getAttribute("data-min");
let secP = curP.getAttribute("data-sec");
if(min===minP&&sec===secP){
if(curP.className!=="select"){
$(curP).addClass("select").siblings().removeClass("select");
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]因为你是我的梦"
}
