跳到主要内容

Projects

三个月时间,我写了款音乐播放器

文 / YuiNijika6 分钟14 次阅读0 条评论

cf613c48-63bf-4a77-9d87-b8890c832820.webp

自己平时主要用网易云,听久了总觉得Electron占内存像开了个操作系统一样烦人(我对Electron本身也没啥意见,就是觉得它太重了)。

于是我决定自己写一套低占用、高颜值的播放器:MusicStorm

GitHub地址:https://github.com/YuiNijika/MusicStorm
在线体验:https://music.miomoe.cn/player.html

技术栈

开发前我翻了挺多项目,最后还是选了 Tauri 2 + React

一句话大家应该都听过:“明明只想写个记事本,打包出来却像个操作系统。” Electron确实方便,生态成熟,但对我这种纯播放器来说,就有点“太重”了。Tauri让Rust处理底层的本地文件和音频,React只管UI,资源占用明显低多了。

前端我用了React(Vite + Tailwind),Rust在处理本地音乐的时候也想走原生路线,Windows下本地播放尽量用 WASAPI独占,不想被浏览器占了太多资源。整体开发其实没一开始想得那么复杂,但用着用着就越来越上头。

功能

很多功能都是自己用着用着加进去的

最开始其实就想做到“能听歌 + 界面好看一点”就行,能放网易云、能放本地就够了。结果真正开始自己用之后,问题就一个接一个冒出来了。

本地音乐越来越多后,有些歌没封面、没歌词、专辑艺人信息还乱七八糟。网易云不是都有这些吗?为什么我还自己去爬?于是我就搞了个本地音乐补网易云信息的功能:自动匹配封面、歌词、艺人专辑,还做了本地缓存,省得每次都重刷。

这个功能后来又顺手加了本地艺人和专辑——自己创建、整理、搜索,一堆零零碎碎的东西。最初我只是觉得全堆在一起太乱了,想自己用着顺眼,现在回头看,这块其实是花了我挺多时间在调的。

还有播放统计,纯粹是好奇自己平时都在听什么:最近听了多少歌?最爱哪个歌手?这种小功能本来不是刚需,但想用就做了。

后面的歌词同步、播放队列、快捷键、后台保存状态、全屏播放器、手势操作、本地缓存……基本就是想到什么就补什么。改一天按钮位置,改半天一堆功能的情况都有。

全屏播放器

最开始全屏就单纯把封面放大,歌词放旁边。后来觉得太空了,就开始往里塞东西:背景模糊、歌词动画、同步滚动、交互按钮……加着加着发现有些地方又不舒服,再改。

现在这个全屏页面我自己平时最爱用了,晚上戴耳机切过去听歌,基本就是日常主力状态。中间很多细节是我后来自己加的,可能改过很多遍,我自己都记不清每次改了啥。

UI

这个折腾最久了

MusicStorm整体走Apple那种简洁风,颜色不花哨,尽量干净舒服。但我也没死抠什么设计规范,更多是自己觉得哪儿顺眼就怎么调。

可能就是一个间距不对劲,一个阴影太重,一个透明度高了点,按钮位置差了几像素……就觉得怪。改完发现旁边又不协调,再继续调。整个UI我花了挺多时间在上面,代码本身可能没动多少,但每天开着都觉得舒服,这就值了。

多端适配

做着做着就变成多平台了

最开始我只是在自己电脑上用,装了个软件。别人想体验总得有个办法,于是就做了网页版。结果网页版做了,就开始补系统媒体控制、后台播放、Now Playing……后来Android也上了,macOS还有人帮忙适配。

现在项目已经从一个纯Windows播放器,变成了支持多端的样子。把页面跑起来其实不难,但系统级的东西(媒体按钮、后台行为、窗口设置)我自己写的时候才发现原来细节这么多,自己用着才知道原来还有这些坑。

执着

有些东西我就是比较较真。

比如本地音乐播放这一块,既然是播放器,那肯定得尽量原生。WASAPI、独占输出这些我一直想搞好,不是为了给别人,而是我自己觉得用着舒服就行。

项目里很多功能其实都是这样——不是因为大家都需要,而是我自己用着觉得有意思就做了。

三个月下来,其实和最开始已经完全不一样了

最开始只是个能听歌的播放器,后来一点点往里加,慢慢变成了现在的样子:本地音乐 + 网易云 + 歌词 + 专辑艺人 + 统计 + 全屏播放器 + 各种小功能。

有些功能现在看起来可能有点小众,但当时我就是因为自己需要才做的。整个过程没有大规划,没有列需求文档,就是平时自己用,自己改,脑子里冒出一个想法就顺手写写。

最后就变成了这个样子。它可能还不是个完美的音乐播放器,里面还有不少没做完的东西,但至少对我来说,它已经是一个每天都会打开来听歌的工具了。

这就够了。

项目目前已经开源了,感兴趣的可以直接看:

GitHub:https://github.com/YuiNijika/MusicStorm
在线体验:https://music.miomoe.cn/player.html

写到这里,我自己也觉得有点小得意2333 如果你也经常被Electron占内存烦,欢迎来试试这个低资源、高颜值的替代品~ 有问题也可以在GitHub提issue,我会尽量回复的(嘻)

文案润色 Grok、海报制作 GPT-Image

延伸阅读

评论