<!-- 导入vue插件 -->
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script>
//代码
/*
音乐播放器
需求1:
搜索歌曲
发送网络请求
回调函数函数中渲染数据
有动画
需求2:
双击播放歌曲
根据id调用接口
查询数据
通过audio播放歌曲
获取专辑的信息 进而获取封面 展示给用户
需求3
播放歌曲时
封面转动
暂停播放时
封面停止转动
步骤:
1.先写动画样式,动画命名为autoRotate,因为是一直运动,所以使用animation;
2.同时写一个暂停的样式,命名为pause,给data添加一个isPause来存值,默认给一个false
3.添加运动和暂停的步骤是添加上面的两个类,但是pause要使用v-bind指令来设置属性;
4.在audio音频里添加播放和暂停的点击方法,在对应的方法里设置对应的布尔值;
需求4
点击播放歌曲
同时获取这首歌的评论
步骤:1.在数据中声明一个comments的空数组,用来存评论内容
2.在播放方法中写获取评论的接口
3.在响应体里将内容赋值给声明的数组
*/
let app = new Vue({
el: "#app",
data: {
inputValue: '',//输入的值
musicList: [], //存储歌列表
songUrl: '',//播放歌曲的url
picUrl:'',//获取专辑信息
isPause:false,//专辑是否暂停
comments:[]//评论内容
},
methods: {
// li标签过渡的事件
randomIndex: function () {
return Math.floor(Math.random() * this.items.length)
},
add: function () {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove: function () {
this.items.splice(this.randomIndex(), 1)
},
//搜索歌曲事件
search() {
//调用接口
this.$http.get(`https://autumnfish.cn/search?keywords=${this.inputValue}`).then(response => {
// console.log(response);
//将结果添加到musicList中
this.musicList = response.body.result.songs;
}, response => {
// error callback
alert("出错了")
});
},
// 双击播放歌曲事件,接收传过来的id
playMusic(id,albumId) {
//获取歌曲的url
this.$http.get(`https://autumnfish.cn/song/url?id=${id}`).then(response => {
// console.log(response);
//将结果添加到musicList中
this.songUrl = response.body.data[0].url;
}, response => {
// error callback
