首页 注册 登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
广告
amber0317
V2EX  ›  分享创造

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

  •  6      
  •   amber0317 · 2023-11-06 22:21:26 +08:00 · 4646 次点击
    这是一个创建于 392 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

    另外，我记得 B 站是有单独的音频流的，而且好像还是 AAC ，你为啥选择转成 MP3 呢。
    jiannei
        12
    jiannei  
       2023-11-07 09:07:58 +08:00
    地址栏即是输入框，很有启发
    mayne95
        13
    mayne95  
       2023-11-07 09:12:37 +08:00
    再提供个思路，作为 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
        14
    amber0317  
    OP
       2023-11-07 09:18:59 +08:00
    @lbb2445 @mayne95 收到，谢谢支持！批量下载确实是一个大需求，我目前有一个自用项目，可以实时监控某个 B 站收藏夹，并自动定期同步到本地；再完善下就开源出来哈
    amber0317
        15
    amber0317  
    OP
       2023-11-07 09:21:19 +08:00
    @XIU2 拖拽到书签栏这个操作方式很帅，感谢建议！
    多 P 目前是只下载第 1P ，这里暂时还没有做判断逻辑 = = 音频流这边可能还要容我找找 API ，我写这个项目的时候在响应里没拿到音频流链接，有的话确实方便很多
    amber0317
        16
    amber0317  
    OP
       2023-11-07 09:24:00 +08:00   ❤️ 1
    @mayne95 👉https://github.com/AsterisMono/bili-music-sync/
    不过这个目前没有做元数据嵌入
    wanwaneryide
        17
    wanwaneryide  
       2023-11-07 09:53:20 +08:00
    一键完成，确实好用
    pumbf
        18
    pumbf  
       2023-11-07 10:05:25 +08:00
    这个能否支持会员的 hires 呢
    tool2d
        19
    tool2d  
       2023-11-07 10:11:36 +08:00
    这项目有意思。

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

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

    这种交互方式很好，通过浏览器插件拦截下载请求，在发送请求到本地服务实现后续操作
    subframe75361
        27
    subframe75361  
       2023-11-07 14:23:12 +08:00
    ffmpeg wasm 大了点，可以精简编译一下
    inhzus
        28
    inhzus  
       2023-11-07 14:23:51 +08:00
    好看，简洁！（其他意见同楼上诸位）
    mailx3
        29
    mailx3  
       2023-11-07 14:36:59 +08:00
    太牛了，支持一下
    RoyRao
        30
    RoyRao  
       2023-11-07 14:38:40 +08:00
    支持一下 OP ，不知道有没有开源打算，可以学习一波

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

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

    支持 OP ！
    hanguofu
        50
    hanguofu  
       2023-11-08 10:37:48 +08:00
    谢谢分享~ 顺便问问 ： 有没有 能批量下载 网易云 音乐的工具 ？
    Kaiv2
        51
    Kaiv2  
       2023-11-08 11:21:50 +08:00
    一个合集只下载地一首歌？
    maymay5
        52
    maymay5  
       2023-11-08 11:39:24 +08:00
    UI 很好看，但是输入框还是有必要的，我一个 WEB 开发从业人员，看到你的提示都愣了一下，普通用户怕是不太会用
    PyCode
        53
    PyCode  
       2023-11-08 14:23:34 +08:00
    我去，前段时间我在 google 上搜到过你的网站，还试了下哈哈，下载流程不错，就是下载的音质好像不高，这个是 b 站接口限制？
    buqizao
        54
    buqizao  
       2023-11-08 16:09:13 +08:00
    很不错的思路，对 WASM 开始感兴趣了，看来能做的东西比 Javascript 要多
    unii23i
        55
    unii23i  
       2023-11-09 09:24:36 +08:00
    我 10 年前陆陆续续下了 niconico 80 个 g ，当时见到喜欢的音乐、视频好要存起来，反正绝对不是当做素材用的，直到现在都没有再打开过，因为总会有新东西
    FoolgryWang
        56
    FoolgryWang  
       2023-11-11 14:42:30 +08:00
    <script src="https://gist.github.com/foolgry/af656f6b34dfa7b72fac932ae2c4dc14.js"></script>

    小书签
    X-Force
        57
    X-Force  
       2023-11-14 04:02:44 +08:00
    处于维护模式？无法使用
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3669 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 04:30 · PVG 12:30 · LAX 20:30 · JFK 23:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.