介绍

播放器分为三个页面：首页（页面一），推荐歌单详情页（页面二），播放器页面（页面三）

思路

先使用HTML+CSS构建基础页面，再通过添加JS来控制页面

页面一                              页面二                                  页面三                    

首页面

观察网易云音乐和QQ音乐，他们都是由上面的头部和中间的内容加上下面的歌曲切换部分组成

所以首页面分为三个部分  herder   zhong1  foooter 

先把三个部分写好，向里面在逐渐添加内容

头部就是简单的布局

footer部分由左侧的图片， 中间的歌曲切换歌曲暂停，和右边的进度条部分组成

由于三个界面的头部和底部是公用的所以只要改变中间的部分就行了

首页面的中间部分由一个轮播图和推荐歌单部分组成

轮播图部分的JS代码

原理就是把图片放到一排，组成一个数组，在固定窗口显示，多余部分隐藏，根据时间逐个变换

根据数组索引来变换图片

推荐歌单部分使用flex布局使5个歌单整齐的排列在一行

推荐歌单

我使用display; none与display：block来切换页面，有实力的可以使用响应式和无刷跳转，和Windows监测hash来实现页面的跳转。

推荐歌单部分由上面的歌单详情和下面的歌曲列表组成

歌曲列表部分我写的挺失败的，用了grid布局，效果是达到了，也简单，但是给后面添加功能造成了困难，后面想添加鼠标覆盖到每一行都添加一个高亮效果，但是由于grid布局，造成了，每一行都是有很多的小块组成的所以导致这个效果没有加上去

并且由于我是没有使用AJAX页面里的东西都是从本地获取的，都不是从服务器获取的导致了，后面就没有办发更改，这个也是一个很不好的地方，歌曲列表就导致 ，没有办法添加，也有办法减少，就写死了

有能力的大佬可以把连接服务器，里面使用的都从服务器获取，尽量不要在本地

歌词界面

歌词界面由左边的圆盘和右边的歌词组成

圆盘部分这个图片是我从网上找的，然后又使用PS抠图，因为上面有水印，所以扣的还不好

圆盘部分使用定位，使一个图片定位到圆盘的中心，然后使用border-radius使其变成圆形，覆盖到中心，然后给整体价格动画，让他旋转，可以使用transiton也可以使用animation动画，两者都可以达到效果

歌词部分也是自己手写的，按照道理来说应该也是从服务器获取歌词，自己写是很失败的，因为后面就没有办法添加功能了，就写死了，因为正常来说，音乐会根据时间歌词会动，还是有一个高亮效果，但是由于写死了，根本没法获取时间，除非自己写时间，但是自己写时间来控制的话，换首歌，歌词得变，时间也得重新写，工作量太大了，所以就放弃了，就放在这了，等后面AJAX用的不i错了，再来给这些遗憾圆一下

底部

三个页面写完了，就该来写底部了，我们写的是什么-------音乐播放器！！！没有音乐怎么能算音乐播放器呢，所以接下来就该添加音乐了

 对非常简陋的一个音乐列表，使用了audio这个标签，别看他简陋，但是这个标签的属性可真不少，你们猜我把音乐放到哪里了，对没错，还是本地，这就导致了，我必须先下载音乐，才能使用

所以就随便下了几首来测试功能，本人没有黑胶也没有绿钻（暗示），下歌找了好久才下好了，使用select标签来选择放那首歌，再给下面的

绑定事件，来一次达到效果，没有写循环播放，所以循环播放用来关闭歌单了；由于每首歌都是有索引的改变索引就换歌，暂停是audio.play();audio.pause();这两个audio的属性，一个播放一个暂停，本来是想用   /* zan ?:audio.pause();*/ 来写的但是不知道为啥一直没实现，所以就用变量来写了后面谁有要是写成了，让我看看

进度条部分

由于时间0：00是写死的不会获取歌曲时间，所以我也懒得改了，中间进度条也是，没法获取时间，我就让他10秒就蹦完了，可以手动跳转，但是不影响歌曲的播放，很失败，右边的音乐和这个进度条是一个功能，比较类似，所以就让他”死“在那把，就没加

东西都江完了，放一下代码吧

本来想用git了但是今天我弄了，没上传上去，先用网盘吧，后面再传一回

链接：https://pan.baidu.com/s/1BNzhLXc5a-KO7rKf7w_FBQ?pwd=lz62 
提取码：lz62

gitee

懿儇/网易云音乐 (gitee.com)