在b站看完vue教程的悦听音乐播放器案例，有很大的收获，这里自己总结一下，由于之前不太理解弹性盒子的知识，又去b站看了另一位老师的课，也将其所给的资源下载下来发布在博客中：弹性盒子flex

首先对界面功能进行分析，从上到下是搜索栏、主体部分、音频播放进度条；其中主体部分昨从到右分为音乐播放列表、黑胶碟片的歌曲图片、留言列表。

mv播放：

注意：引入vue和axios的js文件时，需要在最后引入，否则数据渲染不出来

vue中定义data中的数据的时候记得是数据名：数据！！！！每次都写成等号报错！

一、功能总结

歌曲搜索：输入歌曲的相关内容按回车键搜索数据；具体步骤为按下回车-->查询数据-->渲染数据
歌曲播放：点击音乐列表前的红色按键播放音乐；具体步骤为点击按钮-->获取歌曲地址-->歌曲地址绑定(v-bind)
歌曲封面：点击音乐播放后音乐的黑胶封面会变成相应歌曲的封面；具体步骤为点击播放歌曲->获取歌曲封面->歌曲封面绑定
歌曲评论：点击音乐播放按钮后音乐的热评数据会渲染到界面上；具体步骤为点击播放歌曲->歌曲评论获取(接口歌曲id)->歌曲评论渲染
播放动画：在音乐播放时，黑胶碟片转动，在音乐暂停时，黑胶碟片停止转动；具体步骤为监听音乐播放(v-on play)->监听音乐暂停(v-on pause)->操纵类名
mv播放：点击mv播放按钮时，播放音乐的mv，不想看mv时，点击旁边的遮罩层，mv播放界面就会隐藏；具体步骤为mv图标显示(v-if)->mv地址获取(接口 mvid)->遮罩层(v-show v-on)->mv地址设置(v-bind)

二、html结构

html结构不算复杂，但是学习到的东西还是挺多的。废话不多说，上代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>悦听</title><link rel="stylesheet" href="css/index.css"><script src="js/index.js"></script><script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>   <!--引入axios-->
</head>
<body><div class="wrap"><!-- 播放器主体区域 --><div class="play_wrap" id="player"><!-- 搜索栏 --><div class="search_bar"><!--悦听标题图片  --><img src="data:images/player_title.png" alt="" /><!-- 搜索歌曲 --><input type="text" autocomplete="off" /></div><!-- 主体部分 --><div class="center_con"><!-- 搜索歌曲列表 --><div class='song_wrapper'><ul class="song_list"><li><a href="javascript:;"></a> <b>你好</b> <!----></li><li v-for="item in musicList"><a href="javascript:;" @click="musicPlayer(item.id);musicCover(item.id);musicComments(item.id)"></a>  <!--音乐播放按钮--><b>{{item.name}}</b>   <!--音乐名 --><span><i>{{item.mvid}}</i></span>   <!--mv播放按钮--></li></ul><!-- 左边分割线图片 --><img src="data:images/line.png" class="switch_btn" alt=""></div><!-- 歌曲信息容器 --><div class="player_con playing" ><img src="data:images/player_bar.png" class="play_bar" /><!-- 黑胶碟片图片 --><img src="data:images/disc.png" class="disc autoRotate" /><!-- 歌曲封面图片 --><img src="data:images/cover.png" class="cover autoRotate" /></div><!-- 评论容器 --><div class="comment_wrapper"><h5 class='title'>热门留言</h5><div class='comment_list'><ul class="comment"><li  class="comment_li"><div class="comm_up"><img class="user_pic" src="data:images/person.png"/>    <!--热评头像--><b class="user_nickname"></b><br/></div><div class="comm_right"><span class="detail"></span></div></li></ul></div><!-- 右边分割线图片 --><img src="data:images/line.png" class="right_line"></div></div><!-- 播放进度条部分 --><div class="audio_con"><audio src="" class="myaudio" controls autoplay looop></audio></div><!-- 视频mv --><div class="video_con"><video src="" controls="control"><div class="mask"> </div></video></div></div></div>
</body>
</html>

三、css样式及注解

参考别人的代码，自己边查边学习边写，学习到了css很多之前没学到的东西。

1.css未了解到的内容:

(1).body、p、ul&ol、button、font-size在css中都有默认的设置，具体如下：

　body的margin为8px;

webkit默认行高18px；height18px;

默认font-size16px

p默认margin是16px 0 16px 0;

ul和ol有默认的margin-left:40px的padding-left和16px 0 16px 0;

button有2px的border;我没搞懂为什么button之间有空格;

(2).position属性：

position规定元素的定位类型，任何元素都可以定位，不过绝对定位或固定定位元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position的默认类型是static，其他具体的position值如下：

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

(3).z-index属性:

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

z-index可以为负值，z-index=-1,把它理解成一个层叠效果就好了，z-index:-1就是在平面的下面一层。

(4).background属性:

background 简写属性在一个声明中设置所有的背景属性。

如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

值	描述	CSS
background-color	规定要使用的背景颜色。	1
background-position	规定背景图像的位置。	1
background-size	规定背景图片的尺寸。	3
background-repeat	规定如何重复背景图像。	1
background-origin	规定背景图片的定位区域。	3
background-clip	规定背景的绘制区域。	3
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	规定要使用的背景图像。	1
inherit	规定应该从父元素继承 background 属性的设置。	1

具体参考background属性w3c

(5).css中容易混淆的类使用方式

在css中，类名+空格+类名，表示一种前后代关系。即.class1 .class2{}

在css中 ,类名+类名,表示一种多类选择器，匹配同时具有这两个类的元素。即.class1.class2{}

在html中，class="类名+空格+类名",表示该元素同时拥有两个类。即<div class="class1 class2"></div>

例：

html代码：

<div class="player_con playing" ><img src="data:images/player_bar.png" class="play_bar" /><!-- 黑胶碟片图片 --><img src="data:images/disc.png" class="disc autoRotate" /><!-- 歌曲封面图片 --><img src="data:images/cover.png" class="cover autoRotate" />
</div>

css代码：

.player_con.playing .disc,.player_con.playing .cover {animation-play-state: running;
}

其中.player_con.playing代表同时匹配这两个类；

.player_con.playing .disc代表player_con.playing下面的disc类是它们的子类；

.player_con.playing .cover代表player_con.playing下面的cover类是它们的子类；

(6).@keyframs:

通过@keyframs可以创建动画，创建动画的原理是，可以逐渐从一套css样式转化为另一套css样式，在动画过程中，能够多次改变这套 CSS 样式。可以通过百分比来规定改变发生的时间，也可以通过关键字"from"和"to"，等价于 0% 和 100%；其中0%是动画开始的时间，100%是动画结束的时间。

语法为：@keyframs 动画名称 {动画的选择器：{样式}}

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

(7).transform属性：

其作用是旋转div，transform元素可以应用于2D和3D的场景，可以实现元素的旋转、倾斜、移动、缩放功能。具体的transform值参考：菜鸟教程transform使用教程

一个旋转的例子：

@keyframes Rotate {   /*使 div 元素匀速向下移动：*/from {transform: rotateZ(0);   /*规定旋转的角度*/}to {transform: rotateZ(360deg);}
}

(8).为一个标签设置旋转属性，包括调用以上两个属性transform和@keyframs

html代码：

<!-- 黑胶碟片图片 -->
<img src="data:images/disc.png" class="disc autoRotate" />
<!-- 歌曲封面图片 -->
<img src="data:images/cover.png" class="cover autoRotate" />

css代码：

.autoRotate {animation-name: Rotate;   /*为 @keyframes 动画规定一个名称*/animation-iteration-count: infinite;  /*animation-iteration-count 属性定义动画的播放次数。这里是无限次播放*/animation-play-state: paused;   /*animation-play-state 属性规定动画正在运行还是暂停。*/animation-timing-function: linear;  /*规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。*/animation-duration: 5s;   /*animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。*/
}

animation-name: Rotate; ->为 @keyframes 动画规定一个名称;具体查看animation-name具体介绍
animation-iteration-count: infinite; ->animation-iteration-count 属性定义动画的播放次数。这里是无限次播放；具体查看animation-iteration-count具体介绍
animation-play-state: paused; -> animation-play-state 属性规定动画正在运行还是暂停。具体查看 animation-play-state具体介绍
animation-timing-function: linear; ->规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。具体查看 animation-timing-function具体介绍
animation-duration: 5s; -> animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。具体查看animation-duration具体介绍

(9).transition

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay

具体请看w3c教程transition具体教程

2.css代码

body,   /*这些必须要设置，不然设置songlist的时候li左边会有边距*/
ul,
li{margin: 0px;padding: 0px;
}
/* 大背景 */
.wrap{position: fixed;/*  CSS 中 left 是规定元素左边缘的属性, 该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移.left 也可以作为 float 属性的属性值, 表示元素向左浮动.*/left: 0;top: 0;width: 100%;height: 100%;background: url("../images/bg.jpg") no-repeat;background-size: 100% 100%;
}/* 悦听音乐的整体轮廓 */
.play_wrap{width: 800px;height: 544px;position: fixed; top: 50%;left: 50%;margin-left: -400px;margin-top: -272px;/* background-color: blue; */
}/* 搜索栏 */
.search_bar{height: 60px;background-color: #1eacda;border-top-left-radius: 4px;   /*设置左上边框弧度*/border-top-right-radius: 4px;/*弹性盒子布局以下3句  */display: flex;align-items: center;   /*垂直居中对齐  */justify-content: space-between;   /*水平对齐，并且盒子内的所有item之间都有保留空白 */position: relative;  z-index: 11;   /*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
}.search_bar img{   /*标题img*/margin-left: 23px;
}.search_bar input{margin-right: 23px;width: 296px;height: 34px;border-radius: 17px;border: 0px;background: url("../images/zoom.png")  265px  no-repeat rgba(255, 255, 255, 0.45);   /* backgound的设置依次为背景图url、margin-left、图片不重复、背景颜色 */text-indent: 15px;  /*将段落的第一行缩进*/outline: none;  /*outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。zheli outline：none*/}/* 主体内容 */
.center_con {height: 435px;background-color: rgba(255, 255, 255, 0.5);display: flex;position: relative;
}/* 歌曲列表 */
.song_wrapper{width: 200px;height: 435px;/* box-sizing: border-box;   规定两个并排的带边框的框 */padding: 10px;list-style: none;position: absolute;left: 0px;top: 0px;z-index: 1;/* background-color: brown; */
}.song_list{width: 200px;height: 100%;overflow-y: auto;overflow-x: hidden;/* background-color: chocolate; */
}.song_list::-webkit-scrollbar{    /*滚动条消失，但是可以翻动页面*/display: none;
}.song_list li{ width: 100%;height: 40px;padding-left: 10px;font-size: 12px;color: #333;margin-bottom: 10px;display: flex;align-items: center;   /*垂直居中*/flex-wrap: wrap;   /*弹性盒子布局，子项目一行装不下，会正序多行显示*//* background-color: blueviolet; */}.song_list li:nth-child(odd) {/*规定属于其父元素的第奇数个元素的背景色;odd为奇数，even为偶数，这里的括号中也可以传入具体的数字*/background-color: rgba(240, 240, 240, 0.3);
} .song_list li a{  /*播放的按钮图片*/width: 17px;height: 17px;display: block;background-image: url("../images/play.png");background-size: 100%;margin-right: 5px;
}.song_list li b{   /*歌名*/width: 122px;font-weight: normal;/* 以下三行是实现单行文本溢出显示为省略号 */overflow: hidden;   text-overflow: ellipsis;  /*单行文本溢出显示省略号*/white-space: nowrap;float: left;/* background-color: darkcyan; */
}/* 为显示mv播放按钮预留空间 */
.song_list li span {width: 23px;height: 17px;padding-left: 20px;
}/* mv视频播放按钮图片样式 */
.song_list li span i {display: block;/* width: 100%; */height: 100%;cursor: pointer;background-color: blue;/* background: url("../images/table.png");background-repeat: no-repeat; */background: url("../images/table.png") left -48px no-repeat;}/*歌曲信息，即黑胶碟片 */
.player_con{width: 400px;height: 435px;position: absolute;left: 200px;top: 0px;
}.disc{position: absolute;left: 73px;top: 60px;z-index: 9;   /*z-index值大会在上层*/
}.cover{position: absolute;left: 125px;top: 112px;width: 150px;height: 150px;border-radius: 75px;    /*将图片变成圆形*/z-index: 8;
}/* 评论容器 */
.comment_wrapper{width: 180px;height: 435px;list-style: none;position: absolute;left: 600px;top: 0px;padding: 25px 10px;
}.title {  /*.类名 空格 .类名表示一种前后代关系*/position: absolute;top: 0;/* margin-top: 10px;margin-bottom: 10px; */
}.comm_up{margin-top: 20px;
}.comment_list{height: 415px;overflow-y: auto;overflow-x: hidden;
}
.user_pic{width: 40px;height: 40px;border-radius: 50%;
}
.comm_right{margin: 10px;
}
.user_comm{  /*评论内容细节样式*/font-size: 12px;color: #666;
}.comment_list::-webkit-scrollbar{    /*滚动条消失，但是可以翻动页面*/display: none;
}.user_nickname{padding-top: -30px;font-size: 12px;
}/* 旋转的动画 */
@keyframes Rotate {   /*使 div 元素匀速向下移动：*/from {transform: rotateZ(0);   /*规定旋转的角度*/}to {transform: rotateZ(360deg);}
}/* 旋转的类名 */
.autoRotate {animation-name: Rotate;   /*为 @keyframes 动画规定一个名称*/animation-iteration-count: infinite;  /*animation-iteration-count 属性定义动画的播放次数。这里是无限次播放*/animation-play-state: paused;   /*animation-play-state 属性规定动画正在运行还是暂停。*/animation-timing-function: linear;  /*规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。*/animation-duration: 5s;   /*animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。*/
}.player_con.playing .disc,.player_con.playing .cover {animation-play-state: running;  /* /*animation-play-state 属性规定动画正在运行还是暂停。*/
}.play_bar {position: absolute;left: 200px;top: -10px;z-index: 10;transform: rotate(-25deg);  /* 播放杆 转到播放位置 */transform-origin: 12px 12px;  /*transform-origin 属性允许您改变被转换元素的位置。*/transition: 1s;   /* transition是四个transition子项的缩写*/
}/* 播放杆 转回去 */
.player_con.playing .play_bar {transform: rotate(0);
}/*左右分割线样式*/
.switch_btn {position: absolute;right: 0;top: 0;cursor: pointer;
}.right_line {position: absolute;left: 0;top: 0;
}/* 播放进度条部分样式 */
.audio_con{height: 50px;background-color: #f1f3f4;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;
}.myaudio{width: 800px;height: 40px;margin-top: 5px;outline: none;  /*outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。*/background-color: #f1f3f4;
}/* mv播放部分样式 */
.video_con video {position: fixed;width: 800px;height: 546px;left: 50%;top: 50%;margin-top: -273px;transform: translateX(-50%);  /*向X轴逆向平移50%*/z-index: 990;
}
.mask {position: fixed;width: 100%;height: 600px;left: 0;top: 0;z-index: 980;background-color: rgba(0, 0, 0, 0.8);
}

三、vue代码实现

接口设计：

1.歌曲搜索接口
请求地址:https://autumnfish.cn/search
请求方法:get
请求参数:keywords(查询关键字)
响应内容:歌曲搜索结果
2.歌曲url获取接口
请求地址:https://autumnfish.cn/song/url
请求方法:get
请求参数:id(歌曲id)
响应内容:歌曲url地址
3.歌曲详情获取
请求地址:https://autumnfish.cn/song/detail
请求方法:get
请求参数:ids(歌曲id)
响应内容:歌曲详情(包括封面信息)
4.热门评论获取
请求地址:https://autumnfish.cn/comment/hot?type=0
请求方法:get
请求参数:id(歌曲id,地址中的type固定为0)
响应内容:歌曲的热门评论
5.mv地址获取
请求地址:https://autumnfish.cn/mv/url
请求方法:get
请求参数:id(mvid,为0表示没有mv)
响应内容:mv的地址

js代码：

var app=new Vue({el:"#player",data:{query:"",   //存储搜索框中搜索数据musicList:[],   //保存歌曲信息数组musicurl:"",   //获取歌曲的urlmusiccover:"",   //歌曲的封面musichotcomments:[],  //歌曲热评数据isplaying:false,   //黑胶碟片动画播放状态，false为不播放ismv:false,    //遮罩层的显示状态，默认false不显示mvurl:"",  //mv播放地址},methods: {searchMusic:function(){   //获取歌曲列表var that=this;axios.get("https://autumnfish.cn/search?keywords="+this.query).then(function(response){//console.log(this.query);   //打印query参数，看是否双向绑定成功//console.log(response);    //打印response，看打印出来的数据的层级关系//console.log(response.data.result.songs)   //打印此部分看层级关系是否正确，是否取到应该获取到的数据that.musicList=response.data.result.songs;   //使用musicList来保存取到的歌曲列表},function(err){console.log(err);})},musicPlayer:function(id){   //获取歌曲的urlvar that=this;axios.get("https://autumnfish.cn/song/url?id="+id).then(function(response){// console.log(response);that.musicurl=response.data.data[0].url;},function(err){})},musicCover:function(id){  //获取歌曲的封面var that=this;axios.get("https://autumnfish.cn/song/detail?ids="+id).then(function(response){//console.log(response);   //打印response，看打印出来的数据的层级关系//console.log(response.data.songs[0].al.picUrl);  //打印封面地址that.musiccover=response.data.songs[0].al.picUrl;   //赋值},function(err){})},musicComments:function(id){  //获取热评数据var that=this;axios.get("https://autumnfish.cn/comment/hot?type=0&id="+id).then(function(response){console.log(response);that.musichotcomments=response.data.hotComments;},function(err){})},play:function(){  //播放状态播放动画this.isplaying=true;},puase:function(){ //暂停状态停止动画this.isplaying=false;},musicmv:function(mvid){   //mv播放var that=this;axios.get("https://autumnfish.cn/mv/url?id="+mvid).then(function(response){console.log(response);   //打印获取的mv信息that.mvurl=response.data.data.url;   //获取到的mv地址that.ismv=true;},function(err){})},hide:function(){   //隐藏mv播放器this.puase();this.ismv=false;}}})

七、VUE基础——悦听音乐播放器案例（vue+axios）相关推荐

java计算机毕业设计vue开发一个简单音乐播放器（附源码、数据库）
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署本源码技 ...
pygame系列_原创百度随心听音乐播放器_完整版
程序名:PyMusic 解释:pygame+music 之前发布了自己写的小程序:百度随心听音乐播放器的一些效果图你可以去到这里再次看看效果: pygame系列_百度随心听_完美的UI设计这个程序 ...
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署本源 ...
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库本源码技术栈: 项目 ...
vue使用Howler实现音乐播放器
vue使用Howler实现音乐播放器前言一.引入依赖二.封装组件前言本文使用Howler.js进行播放.使用siriwave做的播放动画具体文档地址如下名称地址 Howler https ...
微信小程序--音乐播放器案例
1.认识audio组件id: 这是audio组件在页面中唯一标识符. 控制audio组件中的音乐播放,可设置可不设置. src: 要播放音频的资源地址. loop : 设置是否循环播放,默认为fals ...
用vue简单写一个音乐播放器
简单地写一个功能比较全的音乐播放器前言因为音乐播放器是一个很可能在项目遇到的东西,早写总比晚写好.趁没事先写个. 思路一个音乐播放器该有的东西: 封面,歌名,专辑,作者控制器(上一首,下一首, ...
vue——一个页面实现音乐播放器
请忽略下面这段文字年关将至,时间好歹又多出了些许.却不敢过度消遣.岁月未曾饶过我,我亦不想饶过岁月.且将它塞得膨胀,让这一年看似加更充实. 不曾料想我一个爱些风花雪月.研墨行歌之人,却做起了碼农这一 ...
python + vue + electron实现本地音乐播放器
前言因为受够了一般音乐播放软件的各种没什么用的功能以及各种垃圾广告,所以想自己搞一个音乐播放器来用,花了几天时间就搞了这么个东西,跟大家分享一下. 这个文档并不是针对前端新手的,所以如果你接触前端不 ...

七、VUE基础——悦听音乐播放器案例（vue+axios）

一、功能总结

二、html结构

三、css样式及注解

三、vue代码实现

七、VUE基础——悦听音乐播放器案例（vue+axios）相关推荐

最新文章

热门文章