网易云音乐API 安装及部署 全过程【本地跑项目以及远端部署 均详解】

一、 音乐播放器部署

1. 音乐API文档
2. Github源码

1-1 在Github或者Gitee上fork此项目

1、 打开播放器API源码点击Fork

1、fork此项目

• GitHub中Fork 是 服务端的代码仓库克隆（即 新克隆出来的代码仓库在远程服务端），包含了原来的仓库（即upstream repository，上游仓库）所有内容，如分支、Tag、提交。
• 代码托管服务（如Github、BitBucket）提供了方便的完成Fork操作的功能（在仓库页面点一下Fork按钮）。这样有了一个你自己的 可以自由提交的远程仓库，然后可以通过的 Pull Request 把你的提交贡献回 原仓库。
• 而对于原仓库Owner来说，鼓励别人Fork他的仓库，通过Pull Request 能给他的仓库做贡献，也是提升了原仓库的知名度。

2、 复制自己的仓库地址

1-2 本地仓库安装

1、 本地新建文件夹NeteaseCloudMusicApi,cmd进入命令行
2、 初始化仓库：git init
3、 从远端仓库拉取项目的源码：git pull 上文复制的仓库地址

1-3 本地跑项目【有node环境】

• 顾名思义嘛，本地服务一关，你就不能调用接口 练习了
• 而且需要不停打开命令行或者控制板运行

1、安装包依赖：npm install
2、 node app.js
3、 浏览器打开即可: http://localhost:3000

1-4 Vercel部署【22年下半年之后不大可行】

服务器如何上线node.js项目【项目放置在github中】

• 自己购入云服务器解决问题

1、 打开Vercel官网
2、 登录之后点击New Project
3、 点击 Import Git Repository 并选择项目并点击import
4、 进入如下页面默认点击Deploy即可

1-5 博主部署完成的网址：

https://netease-cloud-music-api-crete722p-hannah-bingo.vercel.app/
【仅供学习，感谢网易云音乐，接口好评！！！侵权立删】

二、接口调用案例

1、 JS原生代码

• demo源码 ： 访问此处：https://gitee.com/hannah_bingo/simple-player
• 作者： 翼遥bingo

2、 Vue-CLI项目

• demo源码：访问此处

3、 案例在线 查看 ： 希声_music

如果对你有帮助的话，一定要点亮星星哦！！！加油

2-1 介绍

1. 原生JavaScript调用网易云API，实现登录退出，热门歌单，歌词显示等音乐播放功能。绝对是练手可以借鉴的代码！拥有详细的readme文档以及在线展示。该款播放器名为希声。
2. 在线演示 ： 希声_music (3vkj.net)

2-2 现有功能说明及页面展示：

2-2-1 登录及退出功能

• 点击我的音乐以及登录皆可出现

2-2-2 “热门推荐“模块

• 点击对应歌单跳转至”歌单“模块

  

2-2-3 点击播放歌曲并且查看歌词

2-3 使用说明

1. 参与贡献
   • Fork 本仓库
   • 新建 Feat_xxx 分支
   • 提交代码
   • 新建 Pull Request

2-4 说明

1. 页面红色区域为预留轮播图区域
2. 播放条样式为浏览器默认，更改代码已注释
3. 详细功能完善待更，博主得搞其他事情了
4. 尽快将功能更为完善的vue版本的”希声“发布
5. 项目仅为练手所用，感谢网易云音乐提供的接口！好评！！！

2-5 GIF动画能行么？

参考文章：

1. GitHub 的 Fork 是什么意思？