迟到的网易云音乐

原创 走火爱上鱼 随笔 实战经验 2342阅读 2017-12-01 11:08:19 举报

项目预览视频

迟到的网易云音乐源码

网上目前已经有了很多vue写的音乐播放器。但是本胖还是想自己踩一遍坑,毕竟自己踩的坑以后印象才会最深。主要是因为本胖这1年多都是在做商城购物类型网站,对音乐视频这方面没有踩坑经验,所以就很想来踩坑哈。

1.项目总结

1.歌词同步
接口返回的是每段歌词前面带有时间点的字符串。先要把字符串转为为数组,并且将每段歌词前的时间点转为为以秒为单位的时间格式存在一个数组里面,注意渲染歌词的时候,只能渲染一个数组(也就是歌词数组,歌词时间数组和歌词数组的index是同一个的)。然后只需要控制歌词容器的WebkitTransform就行了,最好是让初始化的时候第一行歌词在包裹容器的中间,然后一步步往上移动。
2.音乐后台播放
这一点,一开始我做的只能在播放组件里面播放音乐,后来把audio标签放APP.vue里面然后把控制他的一些变量放vuex里面就可以实现音乐在后台播放。
3.对于同一首歌,比如在播放烟花易冷的时候,再点击播放烟花易冷,audio不会自动从头开始播放,会继续播放下去。这样就造成了历史记录里面如果只有一首歌,你点击下一首,播放组件并没有什么反应的bug。解决方法就是手动重置audio的src属性

2.技术栈

vue2 + vue-cli + vuex + vue-router + webpack + ES6/7

3.项目运行

运行接口
git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git

cd NeteaseCloudMusicApi

npm install

node app.js

运行该项目
git clone https://github.com/lvpangpang/cloud-music.git 

cd cloud-music

npm install

npm run dev

4.目标功能

  • 个性推荐组件 -- 完成
  • 歌单组件 -- 完成
  • 搜索组件 -- 完成
  • 搜索结果组件 -- 完成
  • 搜索歌单结果组件 -- 完成
  • 选择歌单分类组件 -- 完成
  • 音乐播放组件 -- 完成

5.项目展示

迟到的网易云音乐

迟到的网易云音乐

迟到的网易云音乐

迟到的网易云音乐

迟到的网易云音乐

迟到的网易云音乐

迟到的网易云音乐

迟到的网易云音乐

项目预览视频

迟到的网易云音乐源码

评论 ( 12 )
最新评论
kiss19861127 2017-12-08 11:59:55 12F
走火爱上鱼 10F 2017-12-04 10:31:28 11F

我现在还没做的登录后的功能 你去看看网易云音乐app就知道了 很多功能都不需要登录

woainiwain 3F 2017-12-04 10:19:21 10F

那您是怎么登陆的呢。第一步登陆就失败了。后面只能看看不需要登录的接口。

走火爱上鱼 8F 2017-12-04 09:17:47 9F

192.168.1.21 你的本地ip要设置这个。。

384766119 2017-12-04 09:15:36 8F

bogon:cloud-music lihu$ cnpm run dev

cloud-music@1.0.0 dev /Users/lihu/git/cloud-music
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

10% building modules 1/1 modules 0 activeevents.js:160
throw er; // Unhandled 'error' event
^

Error: listen EADDRNOTAVAIL 192.168.1.21:8888
at Object.exports._errnoException (util.js:1020:11)
at exports._exceptionWithHostPort (util.js:1043:20)
at Server._listen2 (net.js:1245:19)
at listen (net.js:1294:10)
at net.js:1404:9
at _combinedTickCallback (internal/process/next_tick.js:83:11)
at process._tickCallback (internal/process/next_tick.js:104:9)
at Module.runMain (module.js:606:11)
at run (bootstrap_node.js:389:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:504:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cloud-music@1.0.0 dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cloud-music@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/lihu/.npm/_logs/2017-12-04T01_15_02_813Z-debug.log

运行报错 什么原因

走火爱上鱼 6F 2017-12-04 09:05:22 7F

你不会用github? 那我也没办法

戒不掉的殇 5F 2017-12-04 08:32:21 6F

打开也没有啊

走火爱上鱼 4F 2017-12-03 21:32:06 5F

点 那个源码 代码在github

戒不掉的殇 2017-12-01 18:11:12 4F

什么也没有啊

走火爱上鱼 2F 2017-12-01 17:55:40 3F

你那接口 我还没调用过。。。接口不是我写的e

woainiwain 2017-12-01 17:41:35 2F

今天发布的文章。今天也不看看评论么。~

woainiwain 2017-12-01 14:36:22 1F

/login/cellphone 正确的手机号密码返回登录错误502