最近在b站学习vue：https://www.bilibili.com/video/av76249419?t=104&p=37
最终实现一个网页音乐播放器。这里贴出我的源码，这里主要以实现功能为主并稍微做了下布局，仅供初学者参考学习。
<div id="musicplayer">
<!--搜索框-->
<div style="width: 100%; height: 50px; margin: 0 auto; text-align: center; background-color: whitesmoke; line-height: 50px;"><input type="text" placeholder="请输入歌曲名、歌手名" /><input type="button" value="搜索" /></div>
<!--播放列表-->
<div style="width: 30%; height: 500px; overflow: auto; float: left; background-color: cadetblue;">
<ul>
<li style="list-style-type: none">
<ul>
<li>
<input type="button" value="播放" />{{ item.name }}
<input type="button" value="mv" />
</li>
</ul>
</li>
</ul>
</div>
<!--音乐封面-->
<div style="width: 40%; height: 500px; float: left;"><img style="width: 100%; height: 500px;" /></div>
<!--音乐评论-->
<div style="width: 30%; height: 500px; float: left; background-color: cadetblue; overflow: auto;">
<ul>
<li style="list-style-type: none">
<ul>
<li><img style="height: 30px; width: 30px;" />
<p style="float: right;">{{ item.user.nickname }}</p>
{{ item.content }}------------------------
</li>
</ul>
</li>
</ul>
</div>
<!--音乐播放组件-->
<div style="height: 50px; width: 100%; text-align: center; line-height: 50px;"><audio autoplay="autoplay" controls="controls"></audio></div>
<!--mv播放组件-->
<div class="mvzhezhao"><video class="10001" style="width: 50%; height: 400px; margin-top: 100px; margin-left: 30%;" controls="controls" width="300" height="150"></video></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>
// 请求地址： https://autumnfish.cn/search get keywords
var app = new Vue({
el: "#musicplayer",
data:{
searchname: "",
musiclist: [],
musicurl: "",
picshow: false,
picurl: "",
commentlist: [],
mvurl: "",
mvshow: false,
},
methods:{
// 搜索音乐
searchmusic:function(){
var that=this;
axios.get("https://autumnfish.cn/search?keywords="+this.searchname).then(function(response){
that.musiclist=response.data.result.songs
},function(err){})
},
// 播放音乐
playmusic:function(id){
this.picshow=true
var that=this;
// 获取音乐地址url
axios.get("https://autumnfish.cn/song/url?id="+id).then(function(response){
that.musicurl=response.data.data[0].url
},function(err){})
// 获取歌曲封面图片
axios.get("https://autumnfish.cn/song/detail?ids="+id).then(function(response){
that.picurl=response.data.songs[0].al.picUrl
},function(err){})
// 获取评论相关内容
axios.get("https://autumnfish.cn/comment/hot?type=0&id="+id).then(function(response){
that.commentlist=response.data.hotComments
},function(err){})
},
// 播放mv
playmv:function(id){
var that=this;
axios.get("https://autumnfish.cn/mv/url?id="+id).then(function(response){
that.mvurl=response.data.data.url;
that.mvshow=true;
},function(err){})
},
// 显示隐藏mv遮罩
hideshow:function(){
this.mvshow=false;
}
}
})
</script>
截图：
