1.数据接口准备
1:歌曲搜索接口请求地址:/search请求方法:get请求参数:keywords(查询关键字)响应内容:歌曲搜索结果2:歌曲url获取接口请求地址:/song/url请求方法:get请求参数:id(歌曲id)响应内容:歌曲url地址3.歌曲详情获取请求地址:/song/detail请求方法:get请求参数:ids(歌曲id)响应内容:歌曲详情(包括封面信息)4.热门评论获取请求地址:/comment/hot?type=0请求方法:get请求参数:id(歌曲id,地址中的type固定为0)响应内容:歌曲的热门评论5.mv地址获取请求地址:/mv/url请求方法:get请求参数:id(mvid,为0表示没有mv)响应内容:mv的地址
2.目录结构
3.代码示例
1.main.js
var app = new Vue({el: "#player",data: {// 查询关键字query: "",// 歌曲数组musicList: [],// 歌曲地址musicUrl: "",// 歌曲封面musicCover: "",// 歌曲评论hotComments: [],// 动画播放状态isPlaying: false,// 遮罩层的显示状态isShow: false,// mv地址mvUrl: ""},methods: {// 歌曲搜索searchMusic: function() {var that = this;axios.get("/search?keywords=" + this.query).then(function(response) {// console.log(response);that.musicList = response.data.result.songs;console.log(response.data.result.songs);},function(err) {});},// 歌曲播放playMusic: function(musicId) {// console.log(musicId);var that = this;// 获取歌曲地址axios.get("/song/url?id=" + musicId).then(function(response) {// console.log(response);// console.log(response.data.data[0].url);that.musicUrl = response.data.data[0].url;},function(err) {});// 歌曲详情获取axios.get("/song/detail?ids=" + musicId).then(function(response) {// console.log(response);// console.log(response.data.songs[0].al.picUrl);that.musicCover = response.data.songs[0].al.picUrl;},function(err) {});// 歌曲评论获取axios.get("/comment/hot?type=0&id=" + musicId).then(function(response) {// console.log(response);// console.log(response.data.hotComments);that.hotComments = response.data.hotComments;},function(err) {});},// 歌曲播放play: function() {// console.log("play");this.isPlaying = true;},// 歌曲暂停pause: function() {// console.log("pause");this.isPlaying = false;},// 播放mvplayMV: function(mvid) {var that = this;axios.get("/mv/url?id=" + mvid).then(function(response) {// console.log(response);console.log(response.data.data.url);that.isShow = true;that.mvUrl = response.data.data.url;},function(err) {});},// 隐藏hide: function() {this.isShow = false;}}});
2.index.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/index.css"></head><body><div class="wrap"><!-- 播放器主体区域 --><div class="play_wrap" id="player"><div class="search_bar"><img src="images/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"><li v-for="item in musicList"><a href="javascript:;" @click="playMusic(item.id)"></a> <b>{{ item.name }}</b> <span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i></i></span></li></ul><img src="images/line.png" class="switch_btn" alt=""></div><!-- 歌曲信息容器 --><div class="player_con" :class="{playing:isPlaying}"><img src="images/player_bar.png" class="play_bar" /><!-- 黑胶碟片 --><img src="images/disc.png" class="disc autoRotate" /><img :src="musicCover" class="cover autoRotate" /></div><!-- 评论容器 --><div class="comment_wrapper"><h5 class='title'>热门留言</h5><div class='comment_list'><dl v-for="item in hotComments"><dt><img :src="item.user.avatarUrl" alt=""></dt><dd class="name">{{ item.nickname}}</dd><dd class="detail">{{ item.content }}</dd></dl></div><img src="images/line.png" class="right_line"></div></div><div class="audio_con"><audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio></div><div class="video_con" v-show="isShow" style="display: none;"><video :src="mvUrl" controls="controls"></video><div class="mask" @click="hide"></div></div></div></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="/npm/vue/dist/vue.js"></script><!-- 官网提供的 axios 在线地址 --><script src="/axios/dist/axios.min.js"></script><script src="./js/main.js"></script></body></html>
3.index.css
body,ul,dl,dd {margin: 0px;padding: 0px;}.wrap {position: fixed;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;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("../images/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("../images/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("../images/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("../images/shutoff.png") no-repeat;left: 50%;margin-left: 400px;margin-top: -273px;top: 50%;z-index: 995;}
4.应用效果图
源码链接：/download/qq_43030934/21057247
如果觉得《vue开发demo - 音乐播放器(二)》对你有帮助，请点赞、收藏，并留下你的观点哦！
