做的一个相比于之前的音乐播放器更完善的播放器,有歌词滚动效果,从外部api获取的歌曲信息,基本的播放器功能都有,功能还是相对完善的。 还有略微的缺陷就是,歌词滚动没有根据每句歌词的时间调速度,并且如果外部api获取数据失败没有做错误处理。 每次获取的歌曲也是随机的
有个问题暂时还没解决,就是歌词滚动的时候速度是固定的,如果一段歌词时间很短,那么会动画还没完,就开始放下一段歌词了。 解决的思路应该是计算生成的对象的下一个歌词和这一段的时间差,然后设置setInterval,不过由于是对象操作起来比较麻烦,暂时还没修改。
还有就是一开始整体布局没有使用vh单位,画面缩放看起来不舒适,后面修改了就可以了。
点击专辑的时候怎么把数据从footer传到Fm对象,最后采用了自定义事件,给Fm绑定了自定义事件,点击footer的ul的时候触发这个事件(由于li一开始没有所以采用事件代理),这样两个模块分别处理自己的事件,独立开来。
jquery , animate.css , 原生js
-
这次更新未加入歌词拖动,加入了搜索功能,借用了Binaryify在github上的网易云音乐api 不过由于api的图片似乎出了问题,搜索的歌只使用了一张图片作为替代.由于两个api的歌词格式有区别,个别歌曲的歌词会显示时间
-
增加了搜索结果的显示,修复了歌词问题
-
增加了歌词拖动,在点击歌词切换进度时出现了问题,因为每个歌都会有重复的歌词,这样高亮的歌词会每次都是第一次出现的那一句话,比如七里香中出现了两句你是我唯一想要的了解,只会高亮第一句。之后对逻辑进行了修改,使用时间进行判断就不会出错
-
把接口放置在自己的服务器上,但由于是http,github无法使用,等改成https才能使用.(现在使用的接口为https,可以正常使用) 修复了图片问题
-
歌词更新高亮会滚动
-
准备使用统一接口,需要对代码结构进行更新加入的代码会主要是用promise和promise.all,暂时想到的代码存储在js的demo.js中
-
加入了动画效果,给旋转的光盘,不过是偷懒拿的别人的效果。
增强了自己的动手能力,也算对自己理论的实践,也可以作为简历的一个项目。由于是使用偏原生js,没有使用框架,更加锻炼自己的编程**(类似于封装,各部分分工明确之类的) 后续会继续完善功能。
现在接口直接在服务器上可以直接在 gihub pages使用了
4.6
歌词接口出现问题,等待修复