vue||简易版音乐播放器

前言

本次项目是对前面的vue知识的综合应用：基于vue实现一个网页版播放器。
需要向网易云接口发送请求，这是相关接口使用文档：
https://api.imjad.cn/cloudmusic.md

页面布局

1，HTML页面布局
本次页面布局相对复杂，我将整个播放器页面用“div”分成上、中下三块。其中：
上方放搜索框和播放器名字；
中间是主要内容块，又分为左右两块，左边用来显示当前播放音乐对应的图片和名字，右边显示搜索结果（20条）；
底部显示音乐播放进度条。
下面的具体代码：

<div id="musicplay"><div id="top"><span>在线随听</span><div id="search"><input type="text" placeholder="请输入内容" v-on:keyup.enter = "search" v-model = "name"/></div></div><div id="cont"><div id="left"><img v-bind:src ="songImg" /><p>{{text}}</p> </div><div id="line"></div><div id="right"><ul><li v-for="(item,i) in obj"><img src="imgs/Music Entertainment.png"  @click="playIt(i)"/><p>{{item.song}}</p></li></ul></div></div><div id="bottom"><audio v-bind:src ="thisSrc" controls="" autoplay="" style="width: 100%;"></audio></div>
</div>

2，CSS层叠样式表
在实际处理时，测试发现，页面是自动换行的，但是为了效果美观，我想让搜索结果显示处的每一个LI的内容都不换行。所以我用了“white-space:nowrap;”来强制不换行。
其他的都是一些常见的属性，在此不再赘述，老规矩，直接放代码：

*{padding:0;margin:0;
}#musicplay{position: absolute;background-color: #fff;left: 20%;top: 64px;width: 60%;height: 500px;box-shadow: 2px 2px 4px #5e72e4;
}
#top{width: 100%;height: 50px;background-color:#5e72e4;
}
#top span{padding-left: 8px;color: #fff;line-height: 50px;}
#search{position: absolute;right: 8px;top: 10px;
}
#search input{width: 180px;height: 24px;padding-left: 8px;border-radius: 12px;border: 1px solid #5e72e4;box-shadow: 1px 1px 2px #5c5c5f;
}#cont{position: absolute;margin: 8px 0;width: 100%;height: 400px;
}
#left{position: absolute;left: 1%;width: 60%;height: 100%;
}
#left img{position: absolute;left: 20%;top: 20%;height: 60%;width: auto;
}
#left p{font-size: 24px;font-weight: 500;color: #5e72e4;
}
#line{position: absolute;top: 10%;left: 62%;width: 0;height: 80%;border-left:1px solid #59666d;opacity: 0.4;
}
#right{position: absolute;padding-top: 6%;right: 1%;width: 36%;height: 90%;
}
ul{width: 100%;height: 90%;overflow: auto;
}
li{width: 100%;height: 30px;list-style: none;padding-left: 2%;
}
li img{/* position: absolute; */float: left;width: 24px;height: auto;cursor: pointer;
}
li p{font-size: medium;float: left;width: 85%;/* 强制不换行 */white-space:nowrap;
}#bottom{position: absolute;bottom: 4px;width: 100%;height: 50px;background-color: #f4f5f7;
}
#bottom img{position: absolute;left: 4%;top: 16px;width: 20px;height: auto;
}
#bottom p{position: absolute;left: 10%;top: 6px;font-size: 10px;}

至此，页面初步效果如图：

逻辑实现

梳理：
1）分析发现，一共有两处地方需要发送申请，一次是搜索内容输入完毕按回车键时；一次是点击具体音乐前面的紫色图标时。
2）两次均采用get方式发送异步请求。
3）搜索框处对应的请求发送时，服务器会返回20个相关数据，里面有歌曲名字、封面图片、id等信息。需要用一个循环将所需信息保存起来备用。
4）点击相应的紫色图标时，将其对应的id作为参数一起发送给服务器，服务器会返回一些与该id相关数据，其中就有我们所需的播放该音乐的地址。至此一切就明了了。
提示：

在使用vue来实现该音乐播放器时，要注意用变量将"this"保存下来，不然随着循环的进行，此“this”就非彼“this”了，故就报错了。
2）注意修改标签的属性值要使用”v-bind“（具有使用见代码）
下面是代码：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>var d = new Vue({el : "#musicplay",data : {text : "",thisSinger : "",thisSrc : "",obj : [] ,songImg : "imgs/playimg.png"},methods : {search : function(){var that = this;this.obj.splice(0, 20);axios.get("https://api.imjad.cn/cloudmusic/?type=search&search_type=1&s="+this.name).then(function(datas){for(var i = 0; i < datas.data.result.songs.length; i++ ){that.obj.push({"song" : datas.data.result.songs[i].name,"imgSrc" : datas.data.result.songs[i].al.picUrl,"id" : datas.data.result.songs[i].privilege.id,});}});},playIt : function(i){var that = this;this.text = this.obj[i].song;axios.get("https://api.imjad.cn/cloudmusic/?type=song&br=128000&id="+this.obj[i].id).then(function(ddd){that.thisSrc = ddd.data.data[0].url;that.songImg = that.obj[i].imgSrc;});}}});</script>

效果

基于vue的音乐播放器