媲美AE特效的Web音乐播放器

　　又是一期新的特效安利，咳咳，准确说应该是第二期。如上图，这次介绍的就是上次说过的炫酷音乐播放器——Azusa!

　　Azusa

　　Three.js开发，媲美AE特效的网页端音乐播放器！

　　作者大佬：EYHN

　　Azusa代码仓库：github.com/EYHN/Azusa

　　demo预览：hojun.cn/azusa

　　gif图预览：

　　视频预览：

　　炫酷音乐播放器-网页版

　　使用教程

　　参考Azusa仓库地址的教程的umd部分：

　　注意

　　上面份代码跑不起来，原因是新版的three舍弃了一些方法。于是查看作者的commit信息，发现作者开发的使用使用的是three.js的0.85.0版本。所以需要指明three版本，博主试过0.102以下版本都行。降低了thress.js版本后还需要在服务器环境下运行才能查看效果。音乐在新版谷歌浏览器下不能制动播放，要加用户交互才行博主修改过程

　　第一步，使用git clone 命令 克隆Azusa github源码。看源码虽然吃力，但是了解这个项目最好的途径。

　　第二步，修改example的代码，解决之前发现的问题。

　　直接将three和需要的js下载到本地，防止资源丢失导致不可以。其中three.js是从npm下载的0.85版本。还引入了font-awesome图标库和jquery的依赖。

　　修改js的代码，使用播放按钮控制音乐播放，停止。解决新版Chrome浏览器下不能自动播放的问题。暂时不能使音乐暂停再续播，因为没在代码里找到pause的方法，只找到了个stop停止的方法，但是会导致音乐重新播放。其中stop还需要修改azusa.js代码给它定义实现，代码如下：

　　至于我为啥知道sound有stop方法，当然是看源码知道的啊。然后随带把load方法里面的play也去掉了，点击播放的时候再调用play方法。

　　未解决bug

　　网页打开后极短时间内点击播放按钮并不能播放音乐，要延迟个二三秒钟点击播放按钮才解决，有大佬知道原因的欢迎留言~

　　完。

　　举报/反馈