vue综合项目——悦听音乐播放器

B站看完一位老师讲的vue项目（悦听），是一个音乐播放器，花了两天时间完成了这个项目，第一次将前几天学习的vue知识应用到项目中，虽然有些地方还需要完善，但是通过这几天的学习，无论是vue入门，还是对html、css知识的复习，都很有收获。之前，每次网页布局的时候，有很多次，仅仅改变了一个元素的属性，页面整体发生了“很奇怪”的变化，很有挫败感，这几天重新学习了css中有关文档流、浮动、定位、弹性盒字等知识，感觉豁然开朗。
前两天学习了vue，仅仅算是入门了，主要是一些vue指令和axios的使用，只是简单地使用vue指令做的小应用是本地应用的“小黑记事本”，结合axios做的网络应用有“天知道”和这篇文章要介绍的音乐播放器“悦听”，废话不多说，进入正题。。（如果功能有完善，后续更新…）

一、项目需求

主界面：

mv界面：

从上到下，分别是搜索栏、主体部分、音频进度条，主体部分从左到右分别是音乐列表、磁盘动画、留言列表。
主要功能有：
1.歌曲搜索：搜索栏中输入关键字，按下回车或者鼠标点击输入框后面的放大镜图标，返回给左侧音乐列表所有相关的歌曲名称。
2.歌曲播放：点击音乐列表中每条音乐前面的红色播放图标实现播放功能，下方进度条显示当前播放进度。
3.查看热评：歌曲播放的同时，右侧评论列表展示所有热评。
4.歌曲播放时的动画：歌曲播放的同时，磁盘中央封面改成相对应的专辑封面，上面的磁头旋转到磁盘上，歌曲暂停后，磁头再旋转回去。
5.mv播放：点击音乐列表中右侧的小电视图标，展现出四周由遮罩层包含的mv界面。
6.mv暂停：点击四周遮罩层，mv暂停，回到主界面。

二、相关接口

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的地址

三、代码实现

html:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>悦听</title><link rel="stylesheet" href="my.css"/></head><body><div class="wrap"><div class="play_wrap" id="player"><!--搜索栏--><div class="search_bar"><div class="title">悦听</div><div class="search"><input @keyup.enter="searchMusic" v-model="query" type="text" class="content" /><img @click="searchMusic" class="loupe" src="data:images/zoom.png" /></div></div><!--主体部分--><div class="center_con"><div class="music_list"><ul class="music"><li v-for="(item,index) in musicName" class="music_li"><a @click="playMusic(item.id)" href="#"><img class="music_btn" src="./images/play.png" /></a><span class="music_name">{{item.name}}</span><span v-show="item.mvid!=0" class="mv_btn"><img @click="getMv(item.mvid)" class="mvtable" src="data:images/table2.png" /></span></li></ul></div><div><img class="left_line" src="data:images/line.png" /></div><div class="pic"><div class="top" :class="{playing:isPlaying}"><img class="player" src="data:images/player_bar.png" /></div><div class="center"><img class="disc" src="data:images/disc.png" /><!--不能有两个src(一个默认的，一个是当前歌的封面)，要用条件表达式--><img :src="picUrl==''?'./images/cover.png':picUrl" class="cover"/></div></div><div><img class="right_line" src="data:images/line.png" /></div><div class="comment_list_outer"><b class="comm">热门留言</b><br /><div class="comment_list"><ul class="comment"><li v-for="(item,index) in commentList" class="comment_li"><img class="user_pic" :src="item.user.avatarUrl" /><div class="comm_right"><b class="user_nickname">{{item.user.nickname}}</b><br /><span class="user_comm">{{item.content}}</span></div></li></ul></div></div></div><!--播放进度音频--><div class="audio_con"><audio :src="musicUrl" @play="play" @pause="pause" class="audio" autoplay controls loop></audio></div><!--视频--><div class="video_con"  v-show="isShow"><!--ref--><video ref='video' :src="mvUrl" autoplay controls loop></video><div class="mask" @click="closeMv"></div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="my.js"></script></body>
</html>

css:

*{margin: 0;padding: 0;list-style: none;
}
.wrap{width: 100vw;height: 100vh;overflow: hidden;background:url(./images/bg.jpg) no-repeat;background-size: 100% 100%;
}
.play_wrap{width: 800px;height: 520px;margin: 77px auto;}
.search_bar{position: relative;z-index: 4;border-radius: 5px 5px 0 0;height: 60px;display: flex;background-color: dodgerblue;
}
.title{flex: 1;padding-top: 10px;padding-left: 15px;color: white;line-height:40px;font-size: 30px;font-family: "隶书";
}
.search{flex:1;line-height:60px;/*当flex:8的时候，为啥padding-left值越大，听字会被盖住，因为padding的值会影响整个div的可见区*//*浏览器检察元素的宽高是可视区的宽高，包括边框、内边距、内容区，不包括外边框*//*flex如果都设置成1，只是代表width之比是1:1*//*当前的情况：（flex为1:1时）设两个弹性元素的width为x，则有2*x+padding-left=500-5px(悦听左边的边距)*/padding-left: 240px;/*background-color: blue;*/
}
.loupe{position: relative;top: -53px;left: 230px;
}
.content{border: none;outline: none;width: 250px;height: 30px;padding-left: 10px;border-radius: 15px;
}
.center_con{height: 445px;display: flex;background-color: rgb(255,255,255,.5);
}
.music_list{flex: 6;overflow-y: auto;overflow-x: hidden;
}
.music_list::-webkit-scrollbar,.comment_list::-webkit-scrollbar{display: none;
}
.music{padding:5px;
}
.music_li:nth-of-type(odd){display: flex;padding: 3px;line-height: 30px;font-size: 12px;
}
.music_li:nth-of-type(even){display: flex;padding: 3px;line-height: 30px;font-size: 12px;background-color: rgba(240, 240, 240, 0.3);
}
.comment_li{display: flex;padding: 10px;line-height: 20px;font-size: 15px;
}
.music_btn{width: 17px;height: 17px;padding-top: 7px;flex:2 ;
}
.music_name{flex:5 ;margin-left: 12px;
}
.mv_btn{flex:2 ;/**//*background: url("./images/table2.png");*/
}
.mvtable{padding-top: 10px;margin-left: 15px;width: 18px;height: 18px;
}
.left_line,.right_line{width: 1px;height: 440px;
}
.pic{flex: 12;
}
.player{position: absolute;top: 125px;left: 680px;z-index: 3;transform: rotate(-45deg);transform-origin: 12px 12px;transition: 1s;
}
.playing .player{transform: rotate(0);
}
.disc{position: absolute;width: 265px;height: 265px;top: 200px;left: 570px;z-index: 2;
}
.cover{position: absolute;width: 160px;height: 160px;top: 250px;left: 620px;z-index: 1;}
.comment_list_outer{flex:6;padding: 8px;
}
.comment_list{height: 415px;overflow-y: auto;overflow-x: hidden;
}
.user_pic{width: 40px;height: 40px;border-radius: 50%;
}
.comm_right{margin: 7px;
}
.user_comm{font-size: 12px;color: #666;
}
.audio_con{height: 35px;}
.audio{outline: none;width: 800px;height: 45px;border-radius:0 0 5px 5px;background-color: rgb(241, 243, 244);;
}
.mask{position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 980;background-color: rgb(0,0,0,.8);
}
video{position: fixed;left:250px;top: -10px;width: 870px;height: 670px;/*transform: translateX(-50%);*/z-index: 990;
}

js:

var music=new Vue({el:"#player",data:{query:"",musicName:[],musicUrl:"",picUrl:"",commentList:[],mvUrl:"",isShow:false,isPlaying:false},methods:{searchMusic:function(){var that=this;axios.get("https://autumnfish.cn/search?keywords="+this.query).then(function(res){that.musicName=res.data.result.songs;
//                  console.log(res);}).catch(function(err){console.log(err);})},playMusic:function(musicId){var that=this;axios.get("https://autumnfish.cn/song/url?id="+musicId).then(function(res){that.musicUrl=res.data.data[0].url;}).catch(function(err){console.log(err);})axios.get("https://autumnfish.cn/song/detail?ids="+musicId).then(function(res){that.picUrl=res.data.songs[0].al.picUrl;}).catch(function(err){console.log(err);})axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicId).then(function(res){console.log(res);that.commentList=res.data.hotComments;}).catch(function(err){console.log(err);})},getMv:function(mvid){var that=this;that.isShow=true;axios.get("https://autumnfish.cn/mv/url?id="+mvid).then(function(res){that.mvUrl=res.data.data.url;}).catch(function(err){console.log(err);})},closeMv:function(){this.isShow=false;//$refsthis.$refs.video.pause();},play:function(){this.isPlaying=true;},pause:function(){this.isPlaying=false;}}
})

vue综合项目——悦听音乐播放器相关推荐

2020 零基础 Vue综合应用教开发音乐播放器—悦听（激发编程乐趣）【整理+源码】
文章目录 1.引言 2.音乐播放器完整版效果图如下: 3.接口引用 4.示例代码 5.结束语点击进入Vue❤学习专栏~ 1.引言这是Vue学习的综合应用篇,教你开发一个音乐播放器,能听歌,能看热门 ...
vue综合项目--悦听播放器
1.实现要求 2.相关接口 1.歌曲搜索接口请求地址:https://autumnfish.cn/search请求方法:get请求参数:keywords(查询关键字)响应内容:歌曲搜索结果 2.歌曲u ...
pygame系列_原创百度随心听音乐播放器_完整版
程序名:PyMusic 解释:pygame+music 之前发布了自己写的小程序:百度随心听音乐播放器的一些效果图你可以去到这里再次看看效果: pygame系列_百度随心听_完美的UI设计这个程序 ...
Android 小项目之--Mini音乐播放器【简单版】（附源码）
上篇文章讲服务的例子中,有个演示服务的后台播放音乐,今天就来讲一讲多媒体之一的音乐播放. 说到多媒体不得不向上追溯,空间多媒体是如何实现的,如何可以让我们轻松的播放音乐.视频?本章讲述点大致如下: 1 ...
用vue+flask做了个音乐播放器（后端部分）
这篇文章用来接着介绍该音乐播放器的后端部分,因为涉及爬虫不知道会不会被限同时也为了阅读者不会觉得过于繁杂所以分开两篇发.这里是上一篇关于前端部分的介绍. 后端这里使用的后端是由python的flas ...
Python基础学习项目之简单音乐播放器
项目简要歌词解析界面设计音乐播放数据抓取项目整合歌词解析播放器中显示的歌词从什么地方来? LRC歌词标签结构: [] 为一个歌词标签标签内的格式分两种一种为标签值类型如: [ti:阿 ...
浅谈javascript的事件监听——音乐播放器的控制
javascript的事件 javascript是一门基于事件驱动的语言,当html页面中的元素触发一些动作时,可以执行相关的js代码. 1.常见事件浏览器窗体事件事件名描述 onload 当窗 ...
Android项目实践(四)——音乐播放器APP
关于Android制作音乐播放器APP的几点建议 1.权限获得 1.在AndroidManifest.xml文件中,做如下声明: <uses-permission android:name=&q ...
QT小项目-QT在线音乐播放器
QT在线音乐播放器先上几张音乐播放器的图片具体实现及部分代码后面还有好多就不一一例举了先上几张音乐播放器的图片 (主页图片来源网络) 具体实现及部分代码搜索歌曲和获取歌曲具体信息的URL,这 ...
基于vue,js的简单pc 音乐播放器
一.简介项目github地址根据github上的http://www.daiwei.org/components/d-audio/来制作的他的是使用纯ES6来写的,我是通过改写他的,使用VUE来 ...

vue综合项目——悦听音乐播放器

一、项目需求

二、相关接口

三、代码实现

vue综合项目——悦听音乐播放器相关推荐

最新文章

热门文章