版权声明:本人文章仅在掘金平台发布,请勿抄袭搬运,转载请注明作者及原文链接 🦉
阅读提示:网页版带有主题和代码高亮,阅读体验更佳 🍉
废话不多说,先来一波截图纯享。
一、动因
很早之前就有自己做一个听歌 app 的想法,觉得各大音乐 app 广告过于烦人。特别是某易云,页面臃肿丑陋,广告不胜其烦。
很早就关注了一个知名音乐 API 的 nodejs 后端项目,准备着什么时候大显身手。不过该知名项目已经被抬了,虽然有 fork 项目,但是不可避免会存在法律风险,就算是自己做着玩,也不想沾染是非,索性重新构思和寻找合适的方式开发。
一方面是思考使用的技术栈,一方面是寻找合适的接口服务,P2P 的方式也很危险,而且需要架设服务器,也不合适,就这样一直寻找和等待。
年前,无意中发现了一款听歌 app,叫哔哔音乐,当时先在某社区发现的软件,号称免费听歌,所以先使用的软件,用下来就发现,果然可以免费收听很多付费音乐,且曲库还挺全,热门歌曲基本都在。
我发现搜索的结果基本都带小破站的标识,发现其基本上就是小破站搜索的结果,只是转换成音频流了。
此时,我虽然对此有点感受,但是毕竟是人家开发的 app,很好奇人家的实现,但是自己确实没办法。直到有一天,我想着这个 app 没准也是掘金哪个好心肠的 giegie~ 开发的,可能还写了文章,我闲来无事就搜了一下,果不其然。在大佬 阿炸克斯 的文章下面发现了哔哔音乐的踪迹,顺藤摸瓜找到了 github 仓库。
于是,我的基础条件就满足了最重要的一个:歌源。
有了歌源实现,我最大的工作量就是重写 UI 而已。但是对于技术栈,我其实考虑了一番,在 react-native 和 flutter 之间犹豫了一下。
原因无非就是,rn 更贴近我 web 的开发习惯,很多东西我不用再学。而 flutter 我需要重新学习语言、框架、开发模式等等,进程阻碍不小。但是经过一番研究和思考,我还是选择了 flutter,理由如下:
1.rn 已经不同于传统 web 开发了,要学习的东西一点不少
2.rn 毕竟是 web 技术,有更大的局限性,坑是一点不少
3.rn 在不同系统的表现,也就是 UI 一致性上,不如 flutter
4.本着来都来了的心态,不如大胆一试,尝试下全新的领域
所以技术栈就定了 flutter。
于是,开发这样一个免费听歌、无广告的音乐 app 所需要的基本条件,我就准备好了。
二、学习 flutter
紧接着就是紧锣密鼓地学习 flutter,这是对于我来说完全陌生的领域,不过,好在现在学习资源很丰富。掘金上关于 flutter 最权威的教学,应该是 张风捷特烈 出的一系列小册和文章。我花了几天时间过了 dart 语法,简单写了官网案例,迅速过了一遍大佬的项目后,就准备开发了。
将 阿炸克斯 的项目 fork 并 clone 下来后,我却迟迟敲不下第一行代码。
三、设计
这里有两个最大的难点,是功能设计和页面设计。
可能会有人说,不是有 AI 吗?页面设计交给 AI 就好了。
我当初也试了各大 AI,但是出图效果惨不忍睹。
好在我有点设计功底,当初的摄影、ppt 设计都没白学,审美还在,再说了,实在没法设计就去抄呗,那么多 app 的设计案例摆着,够用了。
然后就是功能设计,毕竟先设计功能才能设计 UI,想要哪些功能,这个得考虑清楚。
第一个,我需要的就是某狗音乐的播放队列功能,就是,我可以将想听的歌都临时放进一个列表,优先播放列表里的歌曲,这个功能对我来说非常喜欢,这也是我一直使用某狗的原因。
举个 🌰,其它 app 里可能就是提供一个歌单给你,你往里面添加歌曲,你每次听这个列表,可能就是列表循环。但是实际上,我在某些时候,可能就只想听某些歌,单曲循环不合适,但是那些歌我都想听,或者我想先听 3 遍薛之谦的演员,5 遍周杰伦的夜曲。那么播放队列这个功能就很合适。
某狗音乐的交互,在老版本,是列表中歌名左侧有一个 +,点击 + 就会添加到待播放列表,并且支持重复添加,任意顺序。现在是取消 +,直接点击歌名左侧封面。
这个功能是我想要的。
除此之外,导入本地下载歌曲,这是核心功能,如果你不能导入本地歌曲,基本可以说这个 app 就是个鸡肋,总不能还要来回切换 app 听歌。
还有就是歌单,哔哔音乐最大问题就是不能在本地新建歌单,那么需要实现一个歌单的增删改查。
所以目前就明确了 app 的核心功能:
1.支持导入本地下载的音乐
2.支持自由新建歌单(不过歌单建多了也不方便,所以限制最多 20 个)
3.支持搜索互联网歌曲,免费收听,且曲库够大(这点哔哔音乐已经实现了,可以直接使用)
4.支持待播放队列
目前这些功能都已支持,另外在设置页还支持了主题色更换,后续可能会考虑暗黑模式,桌面端适配等。不过这都是后话,我自己不对此承诺。
四、聊聊flutter开发体验
再聊回技术。
首先我觉得最大的阻碍是搭建环境,开发安卓需要安装 jdk、android studio 等,这个过程会很难受,因为你可能会好几天都跑不起来项目,不是这里错就是那里错,好在现在有了 AI,这些问题不再那么恶心了。
再一个,flutter 的生态问题,flutter 确实已经有不少很好用的库了,基本你想要的都有,但是很多库的维护是一个大问题,有些库你去看,可能最近一次更新是在三年前。这就是flutter生态现状,flutter 使用群体和生态远没有 web 那么繁荣。flutter 库的开发基本不会带来什么收益,哪怕说在 github 挣两颗星星,也要你是明星项目才行,加上使用群体本就不大(相较于 web),所以很难让人持续维护。
比如,知名的 flutter 库 getx,其作者由于个人原因,近两年没有更新,基本是一些零散 commit,有个老哥每天在 issue 区抱怨为什么还没有升级到 5 版本,为什么还没有适配最新的 flutter。
这就是现状。
但是别慌,基本你常用的,要用的那些库都在稳定更新,那些不知名的小库,停更就停更吧,反正也指望不上。
在开发这个项目的过程中,我用到了下面的库:
1.just_audio:这是用于音乐播放的知名库
2.bot_toast:toast 提示库,挺好用的
3.provider:知名状态管理库,同作者还有一个 riverpod,上面提到的 getx 也是一个强大的状态管理库,不过getx 除了状态管理还有响应式数据、简洁路由等,下次开发我必然用上 getx
4.dio:知名 http 请求库,用就完事了。不过这部分我没怎么涉及,因为涉及网络请求的地方,哔哔音乐基本都做了
5.sqflite:重量级嘉宾,由于没有后端服务,想要实现列表存储、下一首、上一首等功能,就必须使用到本地数据库,简单的本地存储是没法应对大量的数据的,所以 sqflite 是必然使用的库
6.event_bus:跨页面调用方法会用到,也是挺方便的
7.flutter_easyloading:简单好看的 loading 效果库
8.audio_metadata_reader:音频元信息读取,例如本地音频扫出来后,需要读取音频的时长、作者等信息,就需要这个,不过这里应该不是最佳方案,因为其无法读取封面等信息,存在一定的缺陷,好在我这里并不是很需要封面,用用也没事,最主要的是这个库在稳定维护
在开发过程中,我都在大量使用 AI,特别是本地音频扫描以及播放器部分,没有 AI 我可能都做不出来本地音频扫描这个功能,当初这块功能甚至让我熬夜到凌晨都没解决,好在综合多个 AI 后,在 deepseek 的帮助下,在查找了一些资料后还是解决了。
这里不得不说,这方面的 flutter 生态比较薄弱,我在这里卡壳也是因为 AI 提供的代码示例里使用的第三方库,基本都断更几年了,要么不支持 dart3,要么就是不适配最新 flutter 了,编译会有问题。
甚至 AI 会让你编写原生代码实现,但是我并不想写原生代码,硬是死磕,最后还是被我解决了。只是目前的方案只适配安卓,其它端并不支持。
五、结语
项目从一月中开始开发,到现在历时两个多月,基本没断过,过年的每一天也是在开发,app 已经接近稳定了。
想下载体验的朋友请访问百度网盘:啵啵音乐,提取码:6w7y。
想看源码的朋友请访问 github 仓库:bobomusic。喜欢的话给个 star,谢谢。
往期推荐
搭建一个快速开发油猴脚本的前端工程 18+
👍🏻 28+
💚
金九银十招聘季,IT 打工人,该怎么识别烂公司好公司? 70+
👍🏻 80+
💚
别人休息我努力,悄悄写个 cli 工具,必须提升效率,skr~ 60+
👍🏻 110+
💚
一文掌握 eslint,再也不怕项目报错 20+
👍🏻 30+
💚
开发一个 npm 库应该做哪些工程配置? 40+
👍🏻 50+
💚
分享我在前端学习与开发中用到的神仙网站和工具 40+
👍🏻 110+
💚
uniapp 踩坑记录(二) 130+
👍🏻 150+
💚
闲来无事,摸鱼时让 chatgpt 帮忙,写了一个 console 样式增强库并发布 npm 100+
👍🏻 110+
💚
uniapp 初体验踩坑记录 30+
👍🏻 60+
💚
两小时学会 JS 正则表达式,终身不忘 50+
👍🏻