vue制作简易音乐播放器

先放上最终效果图：
搜索歌手，并点击歌曲名前面的播放图标，播放音乐。播放和暂停音乐时会有唱片旋转和摇杆移动动画。同时会在碟片中央显示专辑封面，右侧会显示热门留言。

点击歌曲名右侧的播放按钮，会播放歌曲的mv：

点击遮罩层，关闭mv，返回主界面。

js代码：

var app = new Vue({el: '#music',data: {keywords: '',list: [],musicurl: '',picurl: '',hotcomments: [],mvurl: '',playingmv: false,musicplaying: false,url: ''},methods: {//   1: 歌曲搜索接口//   请求地址: https: //autumnfish.cn/search//       请求方法: get//   请求参数: keywords(查询关键字)//   响应内容: 歌曲搜索结果search: function () {var that = this;axios.get('https://autumnfish.cn/search?keywords=' + this.keywords).then(function (res) {// console.log(1);// console.log(res.data.result.songs);that.list = res.data.result.songs})},// 2: 歌曲url获取接口// 请求地址: https: //autumnfish.cn/song/url//     请求方法: get// 请求参数: id(歌曲id)// 响应内容: 歌曲url地址// 3. 歌曲详情获取// 请求地址: https: //autumnfish.cn/song/detail//     请求方法: get// 请求参数: ids(歌曲id)// 响应内容: 歌曲详情(包括封面信息)// 4. 热门评论获取// 请求地址: https: //autumnfish.cn/comment/hot?type=0//     请求方法: get// 请求参数: id(歌曲id, 地址中的type固定为0)// 响应内容: 歌曲的热门评论playmusic: function (id) {var that = this;axios.get('https://autumnfish.cn/song/url?id=' + id).then(function (res) {// console.log(res.data.data[0].url);that.musicurl = res.data.data[0].url;if (that.musicurl == null) {alert('此首歌曲暂无音源');that.musicplaying = false;return;} else {that.musicplaying = true;}});axios.get('https://autumnfish.cn/song/detail?ids=' + id).then(function (res) {// console.log(res.data.songs[0].al.picUrl);that.picurl = res.data.songs[0].al.picUrl;});axios.get('https://autumnfish.cn/comment/hot?type=0&id=' + id).then(function (res) {// console.log(res);that.hotcomments = res.data.hotComments;});},//   5. mv地址获取//   请求地址: https: //autumnfish.cn/mv/url//       请求方法: get//   请求参数: id(mvid, 为0表示没有mv)//   响应内容: mv的地址playmv: function (id) {var that = this;if (id == 0) {alert('此首歌曲暂无MV');that.playingmv = false;} else {axios.get('https://autumnfish.cn/mv/url?id=' + id).then(function (res) {// console.log(res.data.data.url);that.mvurl = res.data.data.url;that.playingmv = true;url = that.musicurl;that.musicurl = '';})}},stopmv: function () {this.playingmv = false;this.musicurl = url;},play: function () {this.musicplaying = true;},pause: function () {this.musicplaying = false;}}})

由于使用的是网易云音乐的接口，有部分收费音乐获取不到音乐地址，所以会弹出对话框作提示：

 if (that.musicurl == null) {alert('此首歌曲暂无音源');that.musicplaying = false;return;} else {that.musicplaying = true;}

同理部分音乐没有mv：

 if (id == 0) {alert('此首歌曲暂无MV');that.playingmv = false;} 

网易云音乐接口地址：https://autumnfish.cn/

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！