网易音乐盒开发札记

项目地址:https://github.com/stkevintan/nw_musicbox
不知不觉这个托管在github上面的项目已经过百commit了。刚开始的时候是一个什么都不懂的前端菜鸟,但是一直断断续续开发,学到了不少。曾经不止一次感觉代码混乱难以为继,做过很多次重构,现在终于形成了一个还算清晰的代码结构,初步有了可扩展的接口。

做这个项目原因很简单:作为一个Linuxer在linux下没有自己真正喜欢的网络音乐播放器,其实当时已经存在了许多“轮子”,比如:

  1. cosven的FeelUOwn
  2. wu-nerd的网易云音乐深度插件
  3. darknessomi的命令行musicbox

但是在我眼里它们各有各的不足:

1.FeelUOwn的界面以及交互做的实在太差。
2.深度插件的api很全面,但是我是一个有洁癖的人,深度那套东西实在是不敢在非深度的发行版上折腾。
3.命令行版其实听完美的,但是个人还是喜欢图形界面上的程序,用鼠标点点就OK。

另外,它们都是python程序的,反观现在linux下,用python写的东西真是太多了,mvGather、deepin,然而使用nw.js写的程序屈指可数,音频播放器就更加罕见了。因此,我决定做第一个吃螃蟹的人,探索一下大家都没尝试过的方向。由于没有其他前辈的轮子供参考,探索过程其实挺曲折的,比如播放后端,从最初的html5 audio tag,到Web Audio API、Javascript原生音频解码库aurora、turingou大牛写的player,再重新回归到audio tag。只因为audio tag够简单,而且还原生支持seek操作。
其实,在我心目中,界面与交互做的最好的除了html+css没有其他的了,我就不提java swing等那些简陋的UI库了。如今html5和css3简直相当于半个photoshop和flash了,比如这个没用一张图片,完全用css3描绘出来的iphone4模拟器:http://tjrus.com/iphone/
本项目的歌词滚动、高亮其实也都是css定义的,一句transition就OK了,神奇吧!

snapshot