本项目本人自用喵,所以大部分都是根据我的需求自定义的,不过它是MIT开源的,如果不满意可以自行修改喵Qwq
项目地址:https://github.com/Sptanmok/Etmusic
简介
Etmusic是一个通过NodeJS构建,服务器本地储存所有文件的音乐播放库,并且具有优良的播放与歌词效果
它能通过你的网易云音乐歌单,把你的收藏的音乐,把音乐文件和json歌词全部保存下来,并用Web的形式完美展示
它是纯前端的,因此你可以把它部署在邪恶三角上
起因
我在查看了现有Web音乐播放库的,发现访问都是需要基于网易云的服务,很没有安全感(
为了实现完全自主可控,同时为了个人个性化,于是此项目诞生了
技术栈
用户端:JavaScript,HTML,HTML5,CSS2
部署端:NodeJS
没错,就是那么简单(
适用场景
它实际上因为音乐版权问题与文件体积问题不适合开做一个公开的音乐网站,适合个人在局域网听听音乐。不过不代表一定不能做网站
它很适合在NAS,瘦客户机,轻服务器,等低功耗DIY设备上部署
部署时技术细节
它实际上并没有脱离网易云音乐的API,只是在部署时将音乐mp3文件转化后的json歌词文件以及专辑图片文件全部全部保存到服务器
这样就可以实现世界毁灭时只要服务器还健在就仍可访问
目前拥有两个部署模式,一个是本地模式,一个是云音乐模式
本地模式就是通过服务器内现有的mp3文件以及lrc增强版文件部署,但是lrc增强版其通用性不强,没有多少音乐播放器支持,所以用的人没多少,此模式很快就被废弃了
云音乐模式就是通过网易云音乐歌单从MetingAPI获取歌单内所有歌曲的mp3文件链接和相应的歌曲信息,并通过cheerio在网易云音乐歌曲界面获取专辑封面以及专辑名字
歌词获取想必大家也知道,网易云音乐的歌曲逐字/逐词歌词覆盖率并不大,这其中包括了很多好歌,所以单靠网易云音乐的歌词API对我来说是不够的
所以我整合了QQ音乐歌词源(网易&腾讯:我们联合起来!bushi)
把QRCD项目修改成了一个歌词修改API,但是部分歌曲歌词无法获取
所以使用了现成的落月API – QQMusic,但其完整度仍然存在问题,所以原本由QRCD项目修改而成的API当做备用API
这样就可以覆盖绝大部分歌曲了
但是用的是音乐搜索,不像网易云自带的歌词源可以直接根据音乐ID获取,会出现部分歌曲获取到别的歌曲歌词上
所以具体要不要QQ音乐歌词源增强歌词,还得看具体需求,我保留了配置选项
用户端技术细节
前面的铺垫全都是为了这里,逐字/词歌词将在这里大放异彩
音频可视化
我使用了Web Audio API通过快速傅里叶变换(虽然我本人不会)实现了简单的音频可视化效果
歌词展示
目前拥有三种歌词显示模式
卡拉OK效果
参考此文章,通过linear-gradient得到卡拉OK效果,JS再通过style属性覆盖CSS进度变量来控制
上下方向淡入淡出
原本上一个效果做完就该结束的,但是突然我灵感迸发,”卡拉OK有点太死板了,没有什么活力,我是不是可以用动画改变这一现状。”
一个大胆的构想出现在了我的脑海里,那就是字在字开始时间时淡入,增强效果。
在下一句前再逐个从前到后从下淡出,无缝衔接下一句,并且逐个淡出增加动感,并且可以替代卡拉OK前三点效果
说干就干,经过十几天时间的完善,完成了此效果
问了身边的朋友,大家都说好,可见此效果的威力
随机方向淡入淡出
此模式由上一个模式修改而来,从随机方向淡入,再从反方向淡出
相比上一个,这个随机感和动感更强,但是也有人喜欢规整的,所以分开这两个模式
结语
感谢在开发期间指导的朋友,包括但不限于:RainView,LeonspaceX,Silvaire-qwq,Mio,LYXOfficial,Android-KitKat
感谢API提供:music.163.com,meting.qjqq.cn>基于Meting-API=>api.qijieya.cn/meting(来自大佬改支持VIP音乐),落月API – QQMusic
感谢备用QQ音乐歌词API解密提供:QRCD
LxgwWenKai等提供美观的字体
本次项目历时几个月,圆满完成QwQ