Sekyoro的博客小屋

写一个音乐播放器_静态页面实现

发表于
本文字数： 14k 阅读时长 ≈ 13 分钟

静态页面

2-1

知识点

  • flex 布局
  • 绝对定位和相对定位的使用
  • svg 图标使用
  • 文字溢出处理

首页头部

css文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* home.css */
.wrapper {
    background-color: #eee;
    width: 950px;
    margin: 0 auto;
}

.wrapper .header {
    margin-bottom: 10px;
    width: 100%;
    font-size: 20px;
    text-align: center;
    background-color: #2bb669;
    color: #fff;
    padding: 15px 0px;
}

.wrapper .content {
    width: 100%;
    min-height: 450px;
}

.wrapper .player-control {
    background-color: #f6f6f8;
    height: 65px;
    width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/* http://meyerweb.com/eric/tools/css/reset/
   v5.0.1 | 20191019
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
    display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
    display: none;
}
body {
    line-height: 1;
}
menu, ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/* common.css */
.d-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-around {
    justify-content: space-around;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-center {
    align-items: center;
}

.flex-column {
    flex-direction: column;
}
/* 单行文本溢出处理 */
.single-text-omitted {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* 两行文本溢出处理 */
.multi-text-omitted {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.green {
    background-color: green;
    height: 100%;
}
1
2
3
4
5
6
7
8
9
10
<!-- home.html -->
<div class="wrapper d-flex flex-column">
  <header class="header" id="header-title">推荐页</header>
  <section id="app" class="content">
    <!-- 中间页面html结构 -->
  </section>
  <section class="player-control">
    <!-- 页面底部html结构 -->
  </section>
</div>

最外层的类选择器 wrapper 实现内容居中和设置背景色。头部类选择器 header 样式：定高，设置文字居中，背景色。

首页中间内容布局

中间内容由两部分构成：轮播图和推荐歌单

中间内容包括轮播图和推荐歌单，采用居中布局，居中样式由 w 选择器控制样式，所有的 css 都在 home.css 文件中完成。

1
2
3
4
5
6
7
8
9
10
11
12
<!-- home.html -->
<!-- 中间页面html结构 -->
<section id="app" class="content">
  <div class="w">
    <div class="carousel-wrapper">
      <!-- 轮播图结构 -->
    </div>
    <div class="recommend-playlist">
      <!-- 推荐歌单结构 -->
    </div>
  </div>
</section>
1
2
3
4
5
6
7
8
/* home.css */
.wrapper .content {
  width: 100%;
}
.w {
  width: 90%;
  margin: 0 auto;
}

轮播图

包括显示的图片，切换箭头，指示器。显示的图片和切换箭头包含在同一个 div 容器内，html 布局如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- home.html -->
<div class="carousel-wrapper">
  <!-- 轮播图结构 -->
  <div class="carousel-container ">
    <!-- 切换箭头 -->
    <button
      class="carousel-control carousel-control-left carousel-control-hover"
    >
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-arrow-left"></use>
      </svg>
    </button>
    <button
      class="carousel-control carousel-control-right carousel-control-hover"
    >
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-arrow-right"></use>
      </svg>
    </button>
    <!-- 轮播图图片需要动态生成 -->
    <div class="carousel-item">
      <img
        src="https://tse2-mm.cn.bing.net/th/id/OIP.tXLPDc_5P-E7ca-KtD_UVAHaEK?pid=ImgDet&rs=1"
        alt=""
      />
    </div>
  </div>
  <!-- 指示器 -->
  <ul class="carousel-indicators d-flex">
    <li data-slide-to="0" class="active"></li>
    <li data-slide-to="1"></li>
    <li data-slide-to="2"></li>
  </ul>
</div>

下载矢量图并引入js文件

# iconfont 图标 https://labfile.oss.aliyuncs.com/courses/3871/iconfont.zip

1
2
<!-- home.html -->
<script src="./assets/iconfont.js"></script>

加入css样式

1
2
3
4
5
6
7
8
/* common.css */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

接下来完成轮播图最外围容器 css 样式。样式定宽高，设置相对定位为箭头和图片提供定位父级。

1
2
3
4
5
6
7
8
9
10
11
/* home.css */
.carousel-wrapper {
  width: 100%;
  position: relative;
}

.carousel-container {
  position: relative;
  height: 300px;
  width: 100%;
}

轮播图切换箭头 css 样式。类选择器 carousel-control 设置相对定位位置，通过设置等宽高和 border-radius：50% button 变为圆形。类选择器 carousel-control-hover 设置移入效果，触发方式： 当鼠标移入，通过 js 动态添加 ，移出动态删除.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* home.css */
.carousel-control {
  width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  border: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2021;
  background-color: rgba(255, 255, 255, 0.2);
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}
.carousel-control-left {
  left: 10px;
}

.carousel-control-right {
  right: 10px;
}

.carousel-control-hover {
  background-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
}

类选择器 carousel-container 控制图片 css 样式：定宽，定高（防止因图片大小不一致导致轮播图样式不一致）。类选择器 carousel-item 开启相对定位，后续通过 js 改变 transform：translateX 来实现图片移动。子选择器 carousel-item>img 定宽 100%达到自适应效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* home.css */
.carousel-container {
  position: relative;
  height: 300px;
  width: 100%;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.carousel-item > img {
  width: 100%;
  height: auto;
}

指示器 css 样式。类选择器 carousel-indicators 设置相对定位位置。子选择器 carousel-indicators>li 定宽高，设置背景颜色，开启弹性盒子。类选择器 active 改变背景颜色，通过 js 指定相应指示器的 active 状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* home.css */
.carousel-indicators {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

.carousel-indicators > li {
  width: 50px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  margin: 15px 2px;
}

.carousel-indicators > .active {
  background-color: rgba(255, 255, 255, 0.9);
}

推荐歌单

推荐歌单 html 布局包括三个部分：歌单标题/封面/名字，歌单封面和名字在同一容器内

2-13

1
2
3
4
5
6
7
8
9
10
/* home.css */
.recommend-playlist {
  width: 100%;
  margin: 10px 0;
}

.recommend-playlist-header {
  font-size: 20px;
  padding: 10px 0;
}

歌单封面和文字 css 样式。歌单封面和文字最外围容器样式 ：定宽，开启弹性盒子,主轴上排列方式设置为 space-between。 每一项歌单封面和文字容器样式：定宽，开启弹性盒，设置 flex-column 将图文改为从上到下排列。歌曲封面容器样式 ：定宽，设置相对定位为后面增加 hover 出现图标作为定位父级（ hover 样式通过 js 动态添加）。歌曲封面图片：定宽，高度字适应。歌单标题：定宽，为后续的文字处理限定宽度，设置 margin。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!-- home.html -->
<div class="recommend-playlist">
  <!-- 推荐歌单结构 -->
  <h3 class="recommend-playlist-header">
    推荐歌单<svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-arrow-right"></use>
    </svg>
  </h3>
  <div class="recommend-playlist-container d-flex justify-content-between">
    <!-- 推荐歌单需要动态生成，静态页面先手动复制4份 -->
    <div class="recommend-playlist-item d-flex flex-column hover">
      <div class="recommend-playlist-cover">
        <img
          src="https://tse2-mm.cn.bing.net/th/id/OIP.ZTmNathhKflijArYDaQEDAHaEo?pid=ImgDet&rs=1"
          alt=""
        />
        <svg class="recommend-playlist-icon icon" aria-hidden="true">
          <use xlink:href="#icon-zanting"></use>
        </svg>
      </div>
      <div class="recommend-playlist-title multi-text-omitted">
        图片使用世界前沿的人工智能技术，为用户甄选海量的高清美图
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
/* home.css */
.recommend-playlist {
  width: 100%;
  margin: 10px 0;
}

.recommend-playlist-header {
  font-size: 20px;
  padding: 10px 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* home.css */
.recommend-playlist-container {
  width: 100%;
}

.recommend-playlist-item {
  width: 18%;
}

.recommend-playlist-cover {
  width: 100%;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  font-size: 0;
}

.recommend-playlist-cover > img {
  width: 100%;
  height: auto;
  font-size: 0;
}

.recommend-playlist-cover .recommend-playlist-icon {
  opacity: 0;
  position: absolute;
  bottom: 10px;
  right: 5px;
  color: #ccc;
  font-size: 20px;
}

.hover .recommend-playlist-icon {
  opacity: 1;
}

.recommend-playlist-title {
  margin-top: 5px;
  width: 100%;
}

播放器首页底部布局

分为左右两个部分，共 4 个小模块

2-15

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- home.html -->
<section class="player-control d-flex justify-content-start ">
  <!-- 页面底部html结构 -->
  <div class="player-control-songinfo d-flex justify-content-start">
    <!-- 歌曲信息 -->
  </div>
  <div class="player-control-unit d-flex justify-content-between">
    <div class="control">
      <!-- 播放控制 -->
    </div>
    <div class="d-flex justify-content-between">
      <!-- 播放进度和音量 -->
    </div>
    <div class="list">
      <!-- 歌曲循环和列表 -->
    </div>
  </div>
</section>

首页底部 css 样式。最外层容器样式 player-control：开启弹性盒，设置背景色，定宽高。两栏布局：左侧定宽，右侧通过 flex-grow 实现自适应。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* home.css */
.wrapper .player-control {
  background-color: #f6f6f8;
  height: 65px;
  width: 100%;
}

.player-control-songinfo {
  width: 15%;
  margin-left: 10px;
  min-height: 80%;
}

.player-control-unit {
  flex-grow: 1;
  margin: 0 20px;
}

歌曲信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- home.html -->
<div class="player-control-songinfo d-flex justify-content-start">
  <!-- 歌曲信息 -->
  <div class="img ">
    <img
      src="https://th.bing.com/th/id/R7466240255fa48164e1d741fb8b29893?rik=qd9WWhLotZqIAg&riu=http%3a%2f%2fpicture.ik123.com%2fuploads%2fallimg%2f160906%2f3-160Z6154A8.jpg&ehk=T2cuZ%2fECZd2tvUCSXRgW2e2axgZ8c4rM2GQpotzo3Ec%3d&risl=&pid=ImgRaw"
      alt=""
    />
  </div>
  <div class="songinfo d-flex flex-column align-items-start">
    <span class="songname">歌曲一</span>
    <span class="single-text-omitted singer">歌手2323232323232</span>
  </div>
</div>

歌曲信息 css 样式。歌曲封面 img：定宽，设置圆角。歌曲信息 songinfo：定宽，开启弹性盒，内容从上到下排列。

播放控制

播放控制和歌曲循环和列表布局主要为引入 iconfont 图标，及设置字体大小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- home.html -->
<div class="control">
  <!-- 播放控制 -->
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-shangyiqu"></use>
  </svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-zanting"></use>
  </svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xiayiqu"></use>
  </svg>
</div>

<div class="list">
  <!-- 歌曲循环和列表 -->
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-liebiaoxunhuan"></use>
  </svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-bofangliebiao"></use>
  </svg>
</div>
1
2
3
4
5
6
7
8
/* home.css */
.player-control-unit .control {
  font-size: 35px;
}

.player-control-unit .list {
  font-size: 25px;
}

播放进度和音量 html 布局，该部分重要的是进度条的布局。进度条布局分为三部分：总进度 progress，当前进度 progress-bar，进度点 progress-dot，其中总进度作为父级容器设置相对定位，当前进度和进度点作为子级设置绝对定位，进度和进度点通过 js 实时更新 width 和 left 大小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- home.html -->
<div class="d-flex justify-content-between">
  <!-- 播放进度和音量 -->
  <div class="song-progress d-flex justify-content-between">
    <span class="current-time">00:00</span>
    <div class="progress" id="progress-bar">
      <div class="progress-bar"></div>
      <div class="progress-dot"></div>
    </div>
    <span class="total-time">00:00</span>
  </div>
  <div class="volume d-flex">
    <svg class="icon volume-icon" aria-hidden="true">
      <use xlink:href="#icon-yinliang"></use>
    </svg>
    <div class="progress" id="volume-bar">
      <div class="progress-bar"></div>
      <div class="progress-dot"></div>
    </div>
  </div>
</div>

播放进度和音量 html 布局，该部分重要的是进度条的布局。进度条布局分为三部分：总进度 progress，当前进度 progress-bar，进度点 progress-dot，其中总进度作为父级容器设置相对定位，当前进度和进度点作为子级设置绝对定位，进度和进度点通过 js 实时更新 width 和 left 大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- home.html -->
<div class="d-flex justify-content-between">
  <!-- 播放进度和音量 -->
  <div class="song-progress d-flex justify-content-between">
    <span class="current-time">00:00</span>
    <div class="progress" id="progress-bar">
      <div class="progress-bar"></div>
      <div class="progress-dot"></div>
    </div>
    <span class="total-time">00:00</span>
  </div>
  <div class="volume d-flex">
    <svg class="icon volume-icon" aria-hidden="true">
      <use xlink:href="#icon-yinliang"></use>
    </svg>
    <div class="progress" id="volume-bar">
      <div class="progress-bar"></div>
      <div class="progress-dot"></div>
    </div>
  </div>
</div>

播放进度和音量 css 样式。总进度 progress：设置相对定位和背景色。当前进度 progress-bar：设置绝对定位和背景色。进度点 progress-dot：设置绝对定位和背景色，等宽高，border-radius:50% 设置为圆角。

flex 作为目前越来越流行的布局方式，这个知识点必须要掌握。本实验中 flex 的知识点主要是 justify-content 和 align-item 的应用，如果不熟悉的话需要下去补强。对于常见的两栏和三栏布局，这个也是必须要掌握的。本实验是通过 flex 完成的，其他的方式还包括 float 和定位。

svg 矢量图标，可以做到缩放无变形，目前也已经被广泛应用。iconfont 开源免费且资源众多，且支持 Unicode 引用/font-class 引用/Symbol 引用，可以满足绝大多数图标需求。

-------------本文结束感谢您的阅读-------------
相关文章
感谢阅读.

欢迎关注我的其它发布渠道