做了个一站式 Bilibili 音乐下载器,以下是我的思考

查看 94|回复 4
作者:amber0317   
👉立即试用: https://bili.amono.me/BV1Ag4y1b7pa
(请使用支持 WASM 的现代浏览器)
我偶尔会在 B 站上听歌,因为很多唱见的翻唱都是只在 B 站投稿的,音乐软件不一定会及时更新。
如果每次打开网页听,又麻烦又费流量,搞不好还要给叔叔当 PCDN ;想方设法把视频存下来,在本地手动转音频,补上 ID3 标签和封面扔进收藏,这一整套忙下来,听歌的兴致早就没了。
于是我写了这个小工具帮忙。它提供一站式音乐下载服务:下载+转换+嵌入元数据/封面,整个流程浓缩在短短数十秒的浏览器会话中,无需任何手动干预,到手的文件可以直接丢进音乐库;而且借助 ffmpeg 和 WASM 的力量,所有的魔法都发生在浏览器里,下载和转换速度完全取决于你的网速与 CPU ,既做到了免安装,也省去了服务器维护和运行成本。
这算是我的独立开发生涯首作。简单分享一下设计和实现过程中的一些思路,希望能给你一些启发:
  • 只做一件事,并且做到极致。市面上的视频下载工具、在线转换工具数不胜数,针对 B 站音乐下载这个问题的解决方案也不少,但它们要么需要手动操作,要么需要下载小软件到电脑上,十分不符合我这个懒狗的作风。输入 BV 号(甚至还有更快的办法) → 得到音乐文件,这条路径中任何多余的步骤都应该被解决掉。
  • Less is more. 用户关心什么,就只显示什么,丢掉多余的布局、卡片、导航栏、落地页,把用户的注意力留给更重要的信息。输入框在极端情况下也可以去除不要,地址栏可是天然的输入框。
  • 充分压榨现代前端技术的潜力。Chrome 已经成为了一个事实上的操作系统,从 UI 渲染到网络交互到代码执行甚至到外围设备交互,样样都能做。服务器的支出是固定成本,但如果一部分或者全部的算力密集任务能够放给客户端执行,静态文件托管成本就相对低很多。
  • 保持轻量级,并且善用免费资源。这个可能大家都知道了,网站托管在 Cloudflare Pages 上,利用现代全栈框架的服务端特性,有时甚至可以做到一些纯前端做不到的事情,比如绕过跨域。我也很看好 CF Workers 和 KV 数据库,在迭代开发和快速试错阶段使用这种服务可以省下很多配置成本,接下来也会找时间多做尝试。

    下载, wasm, 音乐, 浏览器

  • huhexian   
    提个建议。不知道你这个工具面向什么人群,如果是普通用户,建议在网站里加一个输入 BV 链接的输入框,因为有些网民,不知道地址栏是什么。
    amber0317
    OP
      
    @huhexian 感谢,我也在想用户引导怎么做更好;目前输入 BV 号并不是主要入口,我更推荐直接把 B 站链接中的 www.bilibili.com 换成 bili.amono.me (主楼忘记讲了...),日常突发使用会方便些,在其他地方也是这样引导的
    lessMonologue   
    支持一下。善于为用户着想的人,用户反馈不会差。
    zephyr1   
    挺好看的
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部