调用网易云api接口

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：HBuilder X

作者：吴业华

撰写时间：2021年5月2号

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

网易云音乐api：https://neteasecloudmusicapi.js.org/#/?id=neteasecloudmusicapi

需要用到的部分功能接口：

1、歌曲搜索接口

请求地址：https://autumnfish.cn/search

请求方法：get

请求参数：keywords(查询关键字)

响应内容：歌曲搜索结果

2、歌曲url获取接口

请求地址：https://autumnfish.cn/song/url

请求方法：get

请求参数：id(查询关键字)

响应内容：歌曲url地址

3、歌曲信息获取

请求地址：https://autumnfish.cn/song/detail

请求方法：get

请求参数：ids(查询关键字)

响应内容：歌曲详情(包括封面信息)

4、热门评论获取

请求地址：https://autumnfish.cn/comment/hot?type=0

请求方法：get

请求参数：id(歌曲id，地址中的type固定为0)

响应内容：歌曲的热门评论

1、创建一个vue项目导入vue、axios

2、构建一个输入框方便搜索需要查询的音乐

3、歌曲列表

<div class="boxa1"><ul><li v-for="item in musicList"><a href="#" @click="playMusic(item.id)" class="iconfont icon-bofang1"></a><label>{{item.name}}</label><a href="#" v-if="item.mvid!=0" @click="playMv(item.mvid)" class="iconfont icon-MV"></a></li></ul></div>

4、播放音乐

<div class="boxb"><audio :src="musicUrl" @play="play" @pause="pause" controls autoplay loop></audio></div><div class="mv" v-show="isShow"><video :src="mvUrl" width="100%" height="100%" controls="controls"></video></div><div class="mk" @click="hide" v-show="isShow"></div>

5、js

var app = new Vue({el: "#xwyy",data: {//查询关键字query: "",//歌曲数组musicList: [],//歌曲地址musicUrl: "",//歌曲封面musicCover: "",//歌曲评论hotComments: [],//动画播放状态isPlaying: false,//遮罩层的状态isShow: false,//MV地址mvUrl: "",},methods: {searchMusic: function() {var that = this;axios.get('https://autumnfish.cn/search?keywords=' + this.query).then(function(response) {console.log(response.data.result.songs);that.musicList = response.data.result.songs;}, function(err) {console.log(err);})},playMusic: function(musicId) {console.log(musicId);//在回调函数里面不能直接写this.musicUrlvar that = this;//获取歌曲地址axios.get('https://autumnfish.cn/song/url?id=' + musicId).then(function(response) {console.log(response.data.data[0].url);that.musicUrl = response.data.data[0].url;}, function(err) {console.log(err);})//歌曲详情获取axios.get('https://autumnfish.cn/song/detail?ids=' + musicId).then(function(response) {console.log(response.data.songs[0].al.picUrl);that.musicCover = response.data.songs[0].al.picUrl;}, function(err) {console.log(err);})//歌曲评论获取axios.get('https://autumnfish.cn/comment/hot?type=0&id=' + musicId).then(function(response) {// console.log(response.data.hotComments);that.hotComments = response.data.hotComments;}, function(err) {console.log(err);})},//歌曲播放play: function() {this.isPlaying = true;console.log("play");},//歌曲暂停pause: function() {this.isPlaying = false;console.log("pause");},//播放MVplayMv:function(mvid){var that = this;//获取MV地址axios.get('https://autumnfish.cn/mv/url?id=' + mvid).then(function(response) {// console.log(response.data.data.url);that.isShow = true;that.mvUrl = response.data.data.url;}, function(err) {console.log(err);})},//隐藏hide:function(){this.isShow = false;}}})

本次作品为学习黑马程序员vue课程demo

调用网易云api接口相关推荐

微信小程序调用网易云音乐接口
微信小程序调用网易云音乐接口前段时间QQ音乐的调用接口不能用了,给大家整理了一个网易云音乐的调用接口. 1.API接口: API接口地址 2.访问连接地址: http://neteasecloudm ...
网易云API接口运行教程
1.网易云api下载地址: https://neteasecloudmusicapi.js.org/#/ 2.下载或者git clone到本地 3.解压缩NeteaseCloudMusicApi-ma ...
网易云api接口_网易云音乐你喜欢吗？你自己也可以做一个
今天我章鱼猫给大家带来的这个开源项目,估计很多喜欢听音乐的朋友都会喜欢.就目前来讲,很多人对这款音乐 App 都抱有一种情怀.那就是:网易云音乐. 可是,你为什么说,我们自己也可以做一个呢?因为整理了 ...
golang调用网易云API
GitHub地址(包含了主要代码) https://github.com/GitHub0301/wyy 喜欢的朋友可以star一下代码主要包含了3个模块 1,获得音乐表单getmusic 传参数歌单 ...
关于NodeJS版网易云API，获取歌词对象不完整问题的解决方案
在参考了开源项目NeteaseCloudMusicApi中调用网易云API获取歌词方式后,我发现其提供的API链接存在获取对象不完整的问题,如下图所示: 下图是开源项目中部署的路由代码: 在经过自己查 ...
调用网易云二维码登录API，实现微信小程序登录
调用网易云二维码登录API,实现微信小程序登录首先前往网易云音乐API官网 binaryify.github.io/NeteaseClou- 首先根据文档的链接下载好配置文件,再根据官方文档启动好本 ...
调用Nodejs版网易云API时，遇到code:-462报错解决方案
在今年(2023)四月份,我在调用基于Nodejs版网易云API时,突然出现了下面这个报错: 很明显,网易云在调用API时需要我们进行账户验证,我很自然想到可能是需要登录.那么查阅API文档,我们可以 ...
网易云音乐接口+vue全家桶开发一款移动端音乐webApp
网易云音乐接口+vue全家桶开发一款移动端音乐webApp 项目还在develop中,感兴趣想要参与的小伙伴可以私我效果图: 骨架屏首页侧边栏每日推荐歌单播放器(小) 播放器(大) 详细信 ...
python实现简单的api接口-简单实现Python调用有道API接口(最新的)
# ''' # Created on 2018-5-26 # # @author: yaoshuangqi # ''' import urllib.request import urllib.pars ...
网易云api及 asrsea 加密参数文档
网易云api及 asrsea 加密参数文档 detail /weapi/v3/song/detail?csrf_token=bd0c8c8504a92cd653d53a7dd1c01ba4 " ...

调用网易云api接口

调用网易云api接口相关推荐

最新文章

热门文章