播放器
- 由于黑马程序员给的接口部分已经用不了。所有只实现了可以播放歌曲的功能
- 说实话五月天的《温柔》好好听呀。。。
- 原理大概就是请求接口后获取到数据,展示到前端页面就行了,没学过html所以一切就以实现功能为主了。
- 《温柔》-五月天
main.js文件
var app = new Vue({
el:'#app',
data:{
query:'',
musicList:[],
musciUrl:[],
},
methods:{
getImg:function(){
axios.get("https://api.imjad.cn/cloudmusic/?type=detail&id=1897964065")
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
},
searchMusic:function(){
var that = this;
axios.get("https://autumnfish.cn/search?keywords="+this.query)
.then(function(response){
that.musicList = response.data.result.songs;
for (let index = 0; index < that.musicList.length; index++) {
that.musciUrl.push("https://music.163.com/song/media/outer/url?id="+that.musicList[index].id)
}
console.log(that.musicList);
},function(err){
console.log(err);
})
console.log(that.musciUrl);
},
}
})
html文件
<div id="app" >
<div>
<input type="text" v-model='query' autocomplete="off" @keyup.enter='searchMusic'>
</div>
<div style="display: flex;" v-for='(item,index) in musicList'>
<div @click='getImg(musciUrl[index])'>
<audio ref='audio' :src="musciUrl[index]"
controls
loop>
</audio>
</div>
{{item.name}}
<div>
<img src="" alt="">
</div>
<div>
</div>
</div>
</div>
<script src="./main.js"></script>
- 效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/eb12a421db3caee515bd1e158027cac7.png)