php

php

php相关问题
html+css

html+css

JavaScript

JavaScript

js,jquery,vue.js等
Linux

Linux

Linux操作系统
Mysql

Mysql

各种资源

各种资源

开发工具,手册等
就业指导

就业指导

UI设计

UI设计

教学视频分享

教学视频分享

打造自己的音乐播放器1 —— 播放页布局

王老师 发表了文章 • 0 个评论 • 1757 次浏览 • 2019-07-12 14:22 • 来自相关话题

在这个系列的文章中,我们将一步一步仿照网易云音乐APP的歌曲播放页来制作一个简单的音乐播放器,此篇文章及后续文章将会涉及到的知识点有:audio(音频播放标签)及其属性和事件方法、利用javascript来进行歌词匹配,音频可视化等。





 
以下是播放页的html结构代码:
<div class="player">
<div class="player-bg"></div>
<div class="player-main">
<div class="player-header">
<h3>我的一个道姑朋友</h3>
<span>双笙</span>
</div>
<div class="player-content">
<div class="cover">
<img src="cover/1.jpg">
</div>
<div class="lyrics"></div>
</div>
<div class="player-footer">
<div class="time-info">
<div class="start-time">00:00</div>
<div class="end-time">04:15</div>
<div class="time-process">
<div class="process-bar">
<div class="current">
<div class="point"></div>
</div>
</div>
</div>
</div>
<div class="control">
<a href="javascript:;" class="prev"><img src="img/prev.png"></a>
<a href="javascript:;" class="play"><img src="img/pause.png"></a>
<a href="javascript:;" class="next"><img src="img/next.png"></a>
</div>
</div>
</div>
</div>以下是播放页的css代码:
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
.player{
height: 100%;
}
.player-bg{
position: relative;
height: 100%;
background: rgba(255,255,255, 0.3) url(cover/1.jpg) no-repeat top center;
background-size: 200%;
filter: blur(40px);
}
.player-main{
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
height: 100%;
width: 100%;
}
.player-header{
width: 100%;
padding: 10px;
letter-spacing: 1px;
}
.player-header h3{
color: white;
font-weight: 100;
}
.player-header span{
color: #AFB1B1;
font-size: 16px;
}
.player-content{
height: 70%;
position: relative;
}
.player-content .cover{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 50px solid black;
border-radius: 50%;
overflow: hidden;
}
.player-content .cover img{
width: 100%;
animation: rotation 10s linear infinite ;
}
@keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

.player-footer{
position: fixed;
left: 0;
bottom: 20px;
width: 100%;
}
.player-footer img{
width: 40px;
height: 40px;
display: inline-block;
}
.time-info{
padding: 0 20px 20px;
overflow: hidden;
color: #B6BDBC;
}
.start-time{
width: 60px;
float: left;
text-align: center;
}
.end-time{
width: 60px;
float: right;
text-align: center;
}
.time-process{
margin: 0 60px;
position: relative;
}
.process-bar{
position: absolute;
top: 10px;
width: 100%;
border-top: 1px solid #B6BDBC;
}
.current{
width: 0;
border-bottom: 1px solid white;
}
.point{
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
cursor: pointer;
position: absolute;
top: -5px;
}
.control{
margin-top: 10px;
text-align: center;
}
.control a{
margin: 0 15px;
}
.control img{
vertical-align: middle;
}
.control .play img{
width: 64px;
height: 64px;
}
在后面的文章中,我们将会对现有的html和css代码进行增加和修改,以次来添加后续功能。
下篇预告:打造自己的音乐播放器2 —— 让歌曲播放和暂停、歌曲进度条增长、切换歌曲
  查看全部
在这个系列的文章中,我们将一步一步仿照网易云音乐APP的歌曲播放页来制作一个简单的音乐播放器,此篇文章及后续文章将会涉及到的知识点有:audio(音频播放标签)及其属性和事件方法、利用javascript来进行歌词匹配,音频可视化等。

1.png

 
以下是播放页的html结构代码:
<div class="player">
<div class="player-bg"></div>
<div class="player-main">
<div class="player-header">
<h3>我的一个道姑朋友</h3>
<span>双笙</span>
</div>
<div class="player-content">
<div class="cover">
<img src="cover/1.jpg">
</div>
<div class="lyrics"></div>
</div>
<div class="player-footer">
<div class="time-info">
<div class="start-time">00:00</div>
<div class="end-time">04:15</div>
<div class="time-process">
<div class="process-bar">
<div class="current">
<div class="point"></div>
</div>
</div>
</div>
</div>
<div class="control">
<a href="javascript:;" class="prev"><img src="img/prev.png"></a>
<a href="javascript:;" class="play"><img src="img/pause.png"></a>
<a href="javascript:;" class="next"><img src="img/next.png"></a>
</div>
</div>
</div>
</div>
以下是播放页的css代码:
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
.player{
height: 100%;
}
.player-bg{
position: relative;
height: 100%;
background: rgba(255,255,255, 0.3) url(cover/1.jpg) no-repeat top center;
background-size: 200%;
filter: blur(40px);
}
.player-main{
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
height: 100%;
width: 100%;
}
.player-header{
width: 100%;
padding: 10px;
letter-spacing: 1px;
}
.player-header h3{
color: white;
font-weight: 100;
}
.player-header span{
color: #AFB1B1;
font-size: 16px;
}
.player-content{
height: 70%;
position: relative;
}
.player-content .cover{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 50px solid black;
border-radius: 50%;
overflow: hidden;
}
.player-content .cover img{
width: 100%;
animation: rotation 10s linear infinite ;
}
@keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

.player-footer{
position: fixed;
left: 0;
bottom: 20px;
width: 100%;
}
.player-footer img{
width: 40px;
height: 40px;
display: inline-block;
}
.time-info{
padding: 0 20px 20px;
overflow: hidden;
color: #B6BDBC;
}
.start-time{
width: 60px;
float: left;
text-align: center;
}
.end-time{
width: 60px;
float: right;
text-align: center;
}
.time-process{
margin: 0 60px;
position: relative;
}
.process-bar{
position: absolute;
top: 10px;
width: 100%;
border-top: 1px solid #B6BDBC;
}
.current{
width: 0;
border-bottom: 1px solid white;
}
.point{
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
cursor: pointer;
position: absolute;
top: -5px;
}
.control{
margin-top: 10px;
text-align: center;
}
.control a{
margin: 0 15px;
}
.control img{
vertical-align: middle;
}
.control .play img{
width: 64px;
height: 64px;
}

在后面的文章中,我们将会对现有的html和css代码进行增加和修改,以次来添加后续功能。
下篇预告:打造自己的音乐播放器2 —— 让歌曲播放和暂停、歌曲进度条增长、切换歌曲