爱意满满的作品展示区。
amber0317

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

  •  6
     
  •   amber0317 · Nov 6, 2023 · 7984 views
    This topic created in 1092 days ago, the information mentioned may be changed or developed.

    👉立即试用: 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 数据库,在迭代开发和快速试错阶段使用这种服务可以省下很多配置成本,接下来也会找时间多做尝试。
    Supplement 1  ·  Nov 7, 2023
    57 replies  •  2023-11-14 04:02:44 +08:00
    huhexian
    huhexian
    Nov 6, 2023
    1
    提个建议。不知道你这个工具面向什么人群,如果是普通用户,建议在网站里加一个输入 BV 链接的输入框,因为有些网民,不知道地址栏是什么。
    amber0317
    amber0317
    OP
    Nov 6, 2023
    2
    @huhexian 感谢,我也在想用户引导怎么做更好;目前输入 BV 号并不是主要入口,我更推荐直接把 B 站链接中的 www.bilibili.com 换成 bili.amono.me (主楼忘记讲了...),日常突发使用会方便些,在其他地方也是这样引导的
    lessMonologue
    lessMonologue
    Nov 6, 2023
    3
    支持一下。善于为用户着想的人,用户反馈不会差。
    D2h0VL89HMAU417B
    D2h0VL89HMAU417B
    Nov 6, 2023
    4
    挺好看的
    cnsouka
    cnsouka
    Nov 6, 2023
    5
    点开就下了一首鹿乃😂不过确实蛮好听的
    lbb2445
    lbb2445
    Nov 6, 2023
    6
    感谢 lz,很符合我的需求.
    个人提几个建议:
    1.最好可以在页面显示输入框,我在下载多首的时候 切换的时候感觉有点操作不习惯
    2.可以考虑支持正则
    3.最好可以使用浏览器缓存稍微记一下我下载过的记录,因为使用 BV 我在下载以后 有时候分不清到底下载了哪一首
    choah
    choah
    Nov 7, 2023
    7
    遇到很多次 10%卡住然后下载失败的是什么原因呢
    WanZi02
    WanZi02
    Nov 7, 2023
    8
    不错的楼主哥哥
    mayne95
    mayne95
    Nov 7, 2023❤️1
    9
    太酷了,完美解决需求。有时候听一些唱歌 up 直播切片的歌曲,每次下载都比较麻烦。蹲一个开源
    mayne95
    mayne95
    Nov 7, 2023
    10
    如果能做成 npm 包也不错。const file = await getBilibiliSong('BV1Ag4y1b7pa')。这样可以批量处理,下载收藏夹的全部歌曲什么的。
    XIU2
    XIU2
    Nov 7, 2023
    11
    你这个网站比较适合整个 JS 书签,需要的时候点一下就自动切换地址栏中的域名了。

    你可以把这个书签内容放到网页中角落,引导使用者将其拖拽到书签栏,并告诉其在需要的时候点一下即可。

    另外,对于多 P 是怎么处理的?是全部下载还在只下载第一个?
    而且我试了下好像没有可以自行选择下载哪一 P 的选项。

    另外,我记得 B 站是有单独的音频流的,而且好像还是 AAC ,你为啥选择转成 MP3 呢。
    jiannei
    jiannei
    Nov 7, 2023
    12
    地址栏即是输入框,很有启发
    mayne95
    mayne95
    Nov 7, 2023
    13
    再提供个思路,作为 PWA 安装,然后走 Web Share API https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Share_data_between_apps#handling_text_data

    这样用户只需要在 b 站分享到你的 PWA App 就可以通过 url 拿到视频 id 了,整个流程更加自然。
    amber0317
    amber0317
    OP
    Nov 7, 2023
    14
    @lbb2445 @mayne95 收到,谢谢支持!批量下载确实是一个大需求,我目前有一个自用项目,可以实时监控某个 B 站收藏夹,并自动定期同步到本地;再完善下就开源出来哈
    amber0317
    amber0317
    OP
    Nov 7, 2023
    15
    @XIU2 拖拽到书签栏这个操作方式很帅,感谢建议!
    多 P 目前是只下载第 1P ,这里暂时还没有做判断逻辑 = = 音频流这边可能还要容我找找 API ,我写这个项目的时候在响应里没拿到音频流链接,有的话确实方便很多
    amber0317
    amber0317
    OP
    Nov 7, 2023❤️1
    16
    @mayne95 👉https://github.com/AsterisMono/bili-music-sync/
    不过这个目前没有做元数据嵌入
    wanwaneryide
    wanwaneryide
    Nov 7, 2023
    17
    一键完成,确实好用
    pumbf
    pumbf
    Nov 7, 2023
    18
    这个能否支持会员的 hires 呢
    tool2d
    tool2d
    Nov 7, 2023
    19
    这项目有意思。

    我是用 B 站音乐大量收藏后,批量下载到手机里,然后导出来用 FFMPEG 批量合并成 MP3 的。
    LavaC
    LavaC
    Nov 7, 2023❤️1
    20
    可以借 bilibilijj 和 github 调用在线编辑器的思路,前者就是注册一个和 bilibili 差不多的域名,用户在相应的视频页面的地址栏多输入几个字母就能跳转你的网站了,顺带有了视频信息;后者可以做一个简单的油猴脚本,一键摁就跳到你的网站,都挺方便的。
    zitionguo
    zitionguo
    Nov 7, 2023
    21
    @choah +1
    KevinDo2
    KevinDo2
    Nov 7, 2023❤️1
    22
    地址作为输入框 本质上是个很麻烦的输入方式。
    如果我想下载,我认为的逻辑应该是,复制视频地址(不是 bv 号,而是整个)---打开你的网站---输入地址---自动获取。
    amber0317
    amber0317
    OP
    Nov 7, 2023
    23
    @choah @zitionguo CF Pages 的 Worker 一般会解析 B 站视频链接到香港 CDN 节点,这个我没有办法控制,可能会导致连通性问题
    amber0317
    amber0317
    OP
    Nov 7, 2023
    24
    @KevinDo2 谢谢,复制网址是个很优秀的思路!也许可以做成打开网页 -> 访问剪贴板自动获取链接?
    XIU2
    XIU2
    Nov 7, 2023❤️1
    25
    @amber0317 我看像 the1812/Bilibili-Evolved 油猴脚本里面的下载功能,就可以选择 dash(仅音频),还有一些开源的 B 站视频下载软件里,大都提供了仅下载音频的功能,你可以去参考一下它们的实现方式。

    另外,如楼上所说,我这边也发现下载速度较慢,而且时不时会中断似的(我看下载速度归零了一段时间),而如果我用油猴脚本、B 站视频下载器去下载视频/音频的话,速度都挺快的(都是国内 CDN )。
    incubus
    incubus
    Nov 7, 2023
    26
    https://github.com/jaysonlong/webvideo-downloader

    这种交互方式很好,通过浏览器插件拦截下载请求,在发送请求到本地服务实现后续操作
    subframe75361
    subframe75361
    Nov 7, 2023
    27
    ffmpeg wasm 大了点,可以精简编译一下
    inhzus
    inhzus
    Nov 7, 2023
    28
    好看,简洁!(其他意见同楼上诸位)
    mailx3
    mailx3
    Nov 7, 2023
    29
    太牛了,支持一下
    RoyRao
    RoyRao
    Nov 7, 2023
    30
    支持一下 OP ,不知道有没有开源打算,可以学习一波

    同时赞成楼上的提议,可以搞成 NPM 包用于 JS 原生调用,那就很爽了
    maemolee
    maemolee
    Nov 7, 2023❤️1
    31
    @amber0317 #2 如果是需要用户这么使用,十分建议写一个 Bookmarklet 放在官网上,实现用户的傻瓜式使用。
    Masoud2023
    Masoud2023
    Nov 7, 2023
    32
    b 站的 cdn 没 cors 策略吗,怎么实现在前端侧直接拉到视频源文件的?
    Masoud2023
    Masoud2023
    Nov 7, 2023
    33
    。。好像还真没有
    zhumengyang
    zhumengyang
    Nov 7, 2023
    34
    https://acghelper.com/ 我用的这个,可以下载视频、音频
    amber0317
    amber0317
    OP
    Nov 7, 2023❤️1
    35
    @RoyRao @mayne95 开源链接已经 append
    7gugu
    7gugu
    Nov 7, 2023
    36
    做的很棒,做成一个书签,直接从页面上提取 BV 号再跳转到 OP 的站点会更棒👍
    clouds
    clouds
    Nov 7, 2023
    37
    music free 支持 B 站,理论上可以实现同等功能,支持安卓/windows 客户端。
    zddhub
    zddhub
    Nov 7, 2023
    38
    有用!支持 mp4 吗?
    voidmnwzp
    voidmnwzp
    Nov 7, 2023
    39
    分段视频怎么办呢
    AMZsowhat
    AMZsowhat
    Nov 7, 2023
    40
    好好好 提个建议 有没有可能做成 chrome/油猴插件呢 懒人会更爱
    yanyao233
    yanyao233
    Nov 7, 2023
    41
    哇哦,这 ui 好好看
    suyuyu
    suyuyu
    Nov 7, 2023
    42
    你这 ui 看着好爽啊
    shalingye
    shalingye
    Nov 7, 2023 via Android
    43
    很不错,期待收藏夹同步工具开源,另外我觉得做成主站域名加字符跳转比较好,识别到后面的链接为 b 站收藏夹就自动批量下载。
    amber0317
    amber0317
    OP
    Nov 7, 2023
    44
    @voidmnwzp 分段 API 是支持的,只不过我遇到的大部分音乐视频都没有分 P ,当时就没想起来做 = =
    @AMZsowhat 上面有个老哥提了 javascript booklet 的方法,也是从收藏夹栏就能调用,而且免安装,也许可以期待一
    波?
    @shalingye 收藏夹同步的工具已经开源啦,请爬下楼,发在上面了
    qike
    qike
    Nov 7, 2023
    45
    好东西,用起来很方便
    AMZsowhat
    AMZsowhat
    Nov 7, 2023
    46
    @amber0317 这个很棒,前几天因为需要下载一段音频内容,我要插件先下载视频(有的番剧还不给下载),然后转格式,几十秒的音频要折腾十多分钟才搞定- -
    AMZsowhat
    AMZsowhat
    Nov 7, 2023
    47
    @AMZsowhat PS:格式划分如果更明确/可选就更 nice 了,一般有下载音频需求时希望的是尽可能无损 wav 之类的
    ltmst
    ltmst
    Nov 8, 2023❤️1
    48
    虽然用得少
    但是作者这个产品设计思路很棒
    UKnowMe
    UKnowMe
    Nov 8, 2023
    49
    很喜欢!之前就有这种想法。OP 可以考虑下做成浏览器插件,最好在 B 站视频页面中点击右键就有下载的按钮。

    我还畅想着,配置自己的网易云账号,然后下载完之后,直接上传到一个自建的播客,这样就以后就无需再通过 B 站来收听。

    支持 OP !
    hanguofu
    hanguofu
    Nov 8, 2023
    50
    谢谢分享~ 顺便问问 : 有没有 能批量下载 网易云 音乐的工具 ?
    Kaiv2
    Kaiv2
    Nov 8, 2023
    51
    一个合集只下载地一首歌?
    maymay5
    maymay5
    Nov 8, 2023
    52
    UI 很好看,但是输入框还是有必要的,我一个 WEB 开发从业人员,看到你的提示都愣了一下,普通用户怕是不太会用
    PyCode
    PyCode
    Nov 8, 2023
    53
    我去,前段时间我在 google 上搜到过你的网站,还试了下哈哈,下载流程不错,就是下载的音质好像不高,这个是 b 站接口限制?
    buqizao
    buqizao
    Nov 8, 2023
    54
    很不错的思路,对 WASM 开始感兴趣了,看来能做的东西比 Javascript 要多
    unii23i
    unii23i
    Nov 9, 2023
    55
    我 10 年前陆陆续续下了 niconico 80 个 g ,当时见到喜欢的音乐、视频好要存起来,反正绝对不是当做素材用的,直到现在都没有再打开过,因为总会有新东西
    X-Force
    X-Force
    Nov 14, 2023
    57
    处于维护模式?无法使用
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1381 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 107ms · UTC 22:00 · PVG 06:00 · LAX 14:00 · JFK 17:00
    ♥ Do have faith in what you're doing.