1、实现要求

2、相关接口

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

因当时同时使用者较多换了老师所提供的接口，只需要把下面的请求地址换回上面即可。

3.代码展示

css样式（引用老师所提供的）

body,
ul,
dl,
dd {margin: 0px;padding: 0px;
}.wrap {position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: url("../imgs/bg.jpg") no-repeat;background-size: 100% 100%;
}.play_wrap {width: 800px;height: 544px;position: fixed;left: 50%;top: 50%;margin-left: -400px;margin-top: -272px;/* background-color: #f9f9f9; */
}.search_bar {height: 60px;background-color: #1eacda;border-top-left-radius: 4px;border-top-right-radius: 4px;display: flex;align-items: center;justify-content: space-between;position: relative;z-index: 11;
}.search_bar img {margin-left: 23px;
}.search_bar input {margin-right: 23px;width: 296px;height: 34px;border-radius: 17px;border: 0px;background: url("../imgs/zoom.png") 265px center no-repeatrgba(255, 255, 255, 0.45);text-indent: 15px;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;
}.song_stretch {width: 600px;
}.song_list {width: 100%;overflow-y: auto;overflow-x: hidden;height: 100%;
}
.song_list::-webkit-scrollbar {display: none;
}.song_list li {font-size: 12px;color: #333;height: 40px;display: flex;flex-wrap: wrap;align-items: center;width: 580px;padding-left: 10px;
}.song_list li:nth-child(odd) {background-color: rgba(240, 240, 240, 0.3);
}.song_list li a {display: block;width: 17px;height: 17px;background-image: url("../imgs/play.png");background-size: 100%;margin-right: 5px;box-sizing: border-box;
}.song_list li b {font-weight: normal;width: 122px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}.song_stretch .song_list li b {width: 200px;
}.song_stretch .song_list li em {width: 150px;
}.song_list li span {width: 23px;height: 17px;margin-right: 50px;
}
.song_list li span i {display: block;width: 100%;height: 100%;cursor: pointer;background: url("../imgs/table.png") left -48px no-repeat;
}.song_list li em,
.song_list li i {font-style: normal;width: 100px;
}.player_con {width: 400px;height: 435px;position: absolute;left: 200px;top: 0px;
}.player_con2 {width: 400px;height: 435px;position: absolute;left: 200px;top: 0px;
}.player_con2 video {position: absolute;left: 20px;top: 30px;width: 355px;height: 265px;
}.disc {position: absolute;left: 73px;top: 60px;z-index: 9;
}
.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;
}
.comment_wrapper .title {position: absolute;top: 0;margin-top: 10px;
}
.comment_wrapper .comment_list {overflow: auto;height: 410px;
}
.comment_wrapper .comment_list::-webkit-scrollbar {display: none;
}
.comment_wrapper dl {padding-top: 10px;padding-left: 55px;position: relative;margin-bottom: 20px;
}.comment_wrapper dt {position: absolute;left: 4px;top: 10px;
}.comment_wrapper dt img {width: 40px;height: 40px;border-radius: 20px;
}.comment_wrapper dd {font-size: 12px;
}.comment_wrapper .name {font-weight: bold;color: #333;padding-top: 5px;
}.comment_wrapper .detail {color: #666;margin-top: 5px;line-height: 18px;
}
.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;background-color: #f1f3f4;
}
/* 旋转的动画 */
@keyframes Rotate {from {transform: rotateZ(0);}to {transform: rotateZ(360deg);}
}
/* 旋转的类名 */
.autoRotate {animation-name: Rotate;animation-iteration-count: infinite;animation-play-state: paused;animation-timing-function: linear;animation-duration: 5s;
}
/* 是否正在播放 */
.player_con.playing .disc,
.player_con.playing .cover {animation-play-state: running;
}.play_bar {position: absolute;left: 200px;top: -10px;z-index: 10;transform: rotate(-25deg);transform-origin: 12px 12px;transition: 1s;
}
/* 播放杆 转回去 */
.player_con.playing .play_bar {transform: rotate(0);
}
/* 搜索历史列表 */
.search_history {position: absolute;width: 296px;overflow: hidden;background-color: rgba(255, 255, 255, 0.3);list-style: none;right: 23px;top: 50px;box-sizing: border-box;padding: 10px 20px;border-radius: 17px;
}
.search_history li {line-height: 24px;font-size: 12px;cursor: pointer;
}
.switch_btn {position: absolute;right: 0;top: 0;cursor: pointer;
}
.right_line {position: absolute;left: 0;top: 0;
}
.video_con video {position: fixed;width: 800px;height: 546px;left: 50%;top: 50%;margin-top: -273px;transform: translateX(-50%);z-index: 990;
}
.video_con .mask {position: fixed;width: 100%;height: 100%;left: 0;top: 0;z-index: 980;background-color: rgba(0, 0, 0, 0.8);
}
.video_con .shutoff {position: fixed;width: 40px;height: 40px;background: url("../imgs/shutoff.png") no-repeat;left: 50%;margin-left: 400px;margin-top: -273px;top: 50%;z-index: 995;
}

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>悦听player</title><!-- 样式 --><link rel="stylesheet" href="./css/playerIndex.css">
</head><body>
<div class="wrap"><!-- 播放器主体区域 --><div class="play_wrap" id="player"><div class="search_bar"><img src="imgs/player_title.png" alt="" /><!-- 搜索歌曲 --><input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" /></div><div class="center_con"><!-- 搜索歌曲列表 --><div class='song_wrapper'><ul class="song_list"><!-- 是否播放音乐以及MV --><li v-for="m in music"><a href="javascript:;" @click="playMusic(m.id)"></a> <b>{{m.name}}</b> <span v-show="m.mvid!=0"><i  @click="playMV(m.mvid)"></i></span></li></ul><img src="imgs/line.png" class="switch_btn" alt=""></div><!-- 歌曲信息容器 --><!-- 判断杆是否放下 --><div :class="flag?'player_con playing':'player_con'"><img src="imgs/player_bar.png" class="play_bar" /><!-- 黑胶碟片 --><img src="imgs/disc.png" class="disc autoRotate" /><img :src="musicPapgeUrl" class="cover autoRotate" /></div><!-- 评论容器 --><div class="comment_wrapper"><h5 class='title'>热门留言</h5><div class='comment_list'><dl v-for="c in musicComment"><dt><img :src="c.user.avatarUrl" alt=""></dt><dd class="name">{{c.user.nickname}}</dd><dd class="detail">{{c.content}}</dd></dl></div><img src="imgs/line.png" class="right_line"></div></div><!--播放位置 --><div class="audio_con"><!-- 判断杆是否放下是播放状态还是暂停状态 --><audio ref='audio'  :src="musicUrl" controls autoplay loop class="myaudio" @pause="zt" @play="bf"></audio></div><div class="video_con"  v-if="mvFlag"><video  controls="controls" :src="mvUrl"></video><div class="mask" @click="closeMV"><div style="color: red;font-size: 20px;position: absolute;top: 200px;left:1200px;">X</div></div></div></div>
</div>
</body>
</html>

vue.js部分

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>var app=new Vue({el:"#player",data:{//输入关键词query:"",//音乐列表显示music:[],//播放音乐的地址musicUrl:"",//音乐的封面地址musicPapgeUrl:"",//音乐的评论musicComment:[],//判断杆是否放下flag:false,//判断mv是否在播放mvFlag:false,//mv的urlmvUrl:"",},methods:{//播放mvplayMV(mid){//mv的弹出层显示this.mvFlag=true;var that = this;axios.get("https://m.livemz.cn/mv/url?id="+mid).then(function (result){that.mvUrl= result.data.data.url;});},//播放bf(){this.flag=true;},//暂停zt(){this.flag=!this.flag;},//寻找歌曲数组searchMusic(){var that=this;axios.get("https://m.livemz.cn/search?keywords="+that.query).then(function (result){that.music= result.data.result.songs;})},//关闭MVcloseMV(){this.mvFlag=false;},playMusic(id){this.flag=true;//播放地址var that=this;axios.get("https://m.livemz.cn/song/url?id="+id).then(function(result){that.musicUrl=result.data.data[0].url;})//封面设置axios.get("https://m.livemz.cn/song/detail?ids="+id).then(function(result){that.musicPapgeUrl=result.data.songs[0].al.picUrl;})//查询歌曲的评论axios.get("https://m.livemz.cn/comment/hot?type=0&id="+id).then(function(result){that.musicComment=result.data.hotComments;})}}})
</script>

项目列表展示

vue综合项目--悦听播放器相关推荐

ffmpeg综合项目：mp4播放器（项目代码已上传到码云）
0.系列文章: ffmpeg音视频编码入门:视频解码 ffmpeg音视频编码入门:音频解码(acc/mp3 转 pcm) ffmpeg -- SDL2播放yuv文件(使用事件驱动和多线程,支持按键暂停 ...
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署本源 ...
java计算机毕业设计vue开发一个简单音乐播放器（附源码、数据库）
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署本源码技 ...
android 基于ijkplayer项目进行的播放器
jjdxm_ijkplayer 项目地址:jjdxm_ijkplayer 简介:基于 ijkplayer 简单的 UI 界面当前项目是基于 ijkplayer 项目进行的播放器界面 UI 封装. 是 ...
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库本源码技术栈: 项目 ...
高德智慧景区随身听播放器框架设计与实现
简介:我们开发选型并没有采用传统的TTS技术(由文本内容生成机器语音),而是采用了更加通用音频格式(比如mp3),作为讲解的音频输入源,方便讲解者进行二次创作.本文将简单回顾高德智慧景区随身听播放器的 ...
[MAUI 项目实战] 音乐播放器（一）：概述与架构
系列文章将分步解读音乐播放器核心业务及代码: [MAUI 项目实战] 音乐播放器(一):概述与架构 [MAUI 项目实战] 音乐播放器(二):播放内核 [MAUI 项目实战] 音乐播放器(三):界面交 ...
Andriod小项目——在线音乐播放器
Andriod小项目--在线音乐播放器转载请注明:http://blog.csdn.net/sunkes/article/details/51189189 Android在线音乐播放器从大一开始就 ...

vue综合项目--悦听播放器

1、实现要求

2、相关接口

3.代码展示

vue综合项目--悦听播放器相关推荐

最新文章

热门文章