全民K歌播放器 Build with Vue.js

Github: https://github.com/igordonxiao/GG-music-FE

编译

1
2
3
4
5
6
7
8
# install dependencies
npm install

# serve with hot reload at localhost:8000
npm run dev

# build for production with minification
npm run build

功能

  • 获取全民K歌用户信息
  • 获取用户歌曲列表
  • 播放歌曲(包含暂停、上一曲、下一曲、歌词同步显示)
  • 当前歌曲播放完毕自动播放下一曲

使用

  • 直接部署为http://localhost:8000时, 加载的歌曲列表即为笔者的
  • 访问他人的歌单的连接为http://localhost:8000?uid=XXXXXXXXX, UID即为他人的全民K歌标识

说明

  • 当URL不跟uid参数时,默认获取的是笔者的全民K歌歌单
  • 如果你需要自行编译,可修改Global.vue中的UID为全民K歌中你自己的UID, 这样就可以不用在地址栏中跟上uid
  • 如果你要部署代理后端,可参考GG-music-Proxy, 如果使用了新的代理后端, 需要修改Global.vue中的BASE_DOMAIN
  • 全民K歌歌曲列表接口默认每一页最多返回15条数据
  • 如果获取UID?
    > 例如笔者的全民K歌网页版地址为http://node.kg.qq.com/personal?uid=639d9d87232a328835, UID则为639d9d87232a328835

Screenshot

已知问题

  • 使用npm run build打包后将dist部署到Nginx下,碟盘无法转动,播放歌曲的URL地址拷贝到新的浏览器地址栏中访问会显示404

使用webpack-dev-server部署

  1. git clone源码并安装依赖包npm install  
  2. 使用nohup npm run dev &

webpack-dev-server部署的问题

  • 直接使用IP访问没有什么问题
  • 使用域名访问遇到Invalid Header问题时,需要修改package.json文件中webpack-dev-server --inline --progress --config build/webpack.dev.conf.js修改为webpack-dev-server --public [你的域名] --config build/webpack.dev.conf.js
  • 使用nohup npm run dev &运行