这是一个创建于 369 天前的主题，其中的信息可能已经有所发展或是发生改变。
👉立即试用： 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
 |
1
huhexian 2023-11-06 22:24:57 +08:00
提个建议。不知道你这个工具面向什么人群，如果是普通用户，建议在网站里加一个输入 BV 链接的输入框，因为有些网民，不知道地址栏是什么。
|
 |
2
amber0317 OP @huhexian 感谢，我也在想用户引导怎么做更好；目前输入 BV 号并不是主要入口，我更推荐直接把 B 站链接中的 www.bilibili.com 换成 bili.amono.me （主楼忘记讲了...），日常突发使用会方便些，在其他地方也是这样引导的
|
 |
3
lessMonologue 2023-11-06 22:30:06 +08:00
支持一下。善于为用户着想的人，用户反馈不会差。
|
 |
4
D2h0VL89HMAU417B 2023-11-06 22:46:15 +08:00
挺好看的
|
 |
5
cnsouka 2023-11-06 23:14:08 +08:00
点开就下了一首鹿乃😂不过确实蛮好听的
|
 |
6
lbb2445 2023-11-06 23:50:07 +08:00
感谢 lz,很符合我的需求.
个人提几个建议: 1.最好可以在页面显示输入框,我在下载多首的时候 切换的时候感觉有点操作不习惯 2.可以考虑支持正则 3.最好可以使用浏览器缓存稍微记一下我下载过的记录,因为使用 BV 我在下载以后 有时候分不清到底下载了哪一首 |
 |
7
choah 2023-11-07 00:00:27 +08:00
遇到很多次 10%卡住然后下载失败的是什么原因呢
|
 |
8
WanZi02 2023-11-07 01:07:01 +08:00
不错的楼主哥哥
|
 |
9
mayne95 2023-11-07 08:32:54 +08:00  1
太酷了，完美解决需求。有时候听一些唱歌 up 直播切片的歌曲，每次下载都比较麻烦。蹲一个开源
|
|
10
mayne95 2023-11-07 08:40:06 +08:00
如果能做成 npm 包也不错。const file = await getBilibiliSong('BV1Ag4y1b7pa')。这样可以批量处理，下载收藏夹的全部歌曲什么的。
|
 |
11
XIU2 2023-11-07 08:51:33 +08:00
你这个网站比较适合整个 JS 书签，需要的时候点一下就自动切换地址栏中的域名了。
你可以把这个书签内容放到网页中角落，引导使用者将其拖拽到书签栏，并告诉其在需要的时候点一下即可。 另外，对于多 P 是怎么处理的？是全部下载还在只下载第一个？ 而且我试了下好像没有可以自行选择下载哪一 P 的选项。 另外，我记得 B 站是有单独的音频流的，而且好像还是 AAC ，你为啥选择转成 MP3 呢。 |
 |
12
jiannei 2023-11-07 09:07:58 +08:00
地址栏即是输入框，很有启发
|
|
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 了，整个流程更加自然。 |
|
14
amber0317 OP |
|
15
amber0317 OP @XIU2 拖拽到书签栏这个操作方式很帅，感谢建议！
多 P 目前是只下载第 1P ，这里暂时还没有做判断逻辑 = = 音频流这边可能还要容我找找 API ，我写这个项目的时候在响应里没拿到音频流链接，有的话确实方便很多 |
|
16
amber0317 OP 1
|
 |
17
wanwaneryide 2023-11-07 09:53:20 +08:00
一键完成，确实好用
|
 |
18
pumbf 2023-11-07 10:05:25 +08:00
这个能否支持会员的 hires 呢
|
 |
19
tool2d 2023-11-07 10:11:36 +08:00
这项目有意思。
我是用 B 站音乐大量收藏后，批量下载到手机里，然后导出来用 FFMPEG 批量合并成 MP3 的。 |
 |
20
LavaC 2023-11-07 10:18:13 +08:00 1
可以借 bilibilijj 和 github 调用在线编辑器的思路，前者就是注册一个和 bilibili 差不多的域名，用户在相应的视频页面的地址栏多输入几个字母就能跳转你的网站了，顺带有了视频信息；后者可以做一个简单的油猴脚本，一键摁就跳到你的网站，都挺方便的。
|
 |
22
KevinDo2 2023-11-07 10:42:33 +08:00 1
地址作为输入框 本质上是个很麻烦的输入方式。
如果我想下载，我认为的逻辑应该是，复制视频地址（不是 bv 号，而是整个）---打开你的网站---输入地址---自动获取。 |
|
23
amber0317 OP |
|
25
XIU2 2023-11-07 11:33:25 +08:00 1
@amber0317 我看像 the1812/Bilibili-Evolved 油猴脚本里面的下载功能，就可以选择 dash(仅音频)，还有一些开源的 B 站视频下载软件里，大都提供了仅下载音频的功能，你可以去参考一下它们的实现方式。
另外，如楼上所说，我这边也发现下载速度较慢，而且时不时会中断似的（我看下载速度归零了一段时间），而如果我用油猴脚本、B 站视频下载器去下载视频/音频的话，速度都挺快的（都是国内 CDN ）。 |
 |
26
incubus 2023-11-07 13:57:51 +08:00
|
 |
27
subframe75361 2023-11-07 14:23:12 +08:00
ffmpeg wasm 大了点，可以精简编译一下
|
 |
28
inhzus 2023-11-07 14:23:51 +08:00
好看，简洁！（其他意见同楼上诸位）
|
 |
29
mailx3 2023-11-07 14:36:59 +08:00
太牛了，支持一下
|
 |
30
RoyRao 2023-11-07 14:38:40 +08:00
支持一下 OP ，不知道有没有开源打算，可以学习一波
同时赞成楼上的提议，可以搞成 NPM 包用于 JS 原生调用，那就很爽了 |
 |
31
maemolee 2023-11-07 15:07:07 +08:00 1
@amber0317 #2 如果是需要用户这么使用，十分建议写一个 Bookmarklet 放在官网上，实现用户的傻瓜式使用。
|
 |
32
Masoud2023 2023-11-07 15:24:23 +08:00
b 站的 cdn 没 cors 策略吗，怎么实现在前端侧直接拉到视频源文件的？
|
|
33
Masoud2023 2023-11-07 15:25:35 +08:00
。。好像还真没有
|
 |
34
zhumengyang 2023-11-07 15:39:14 +08:00
https://acghelper.com/ 我用的这个，可以下载视频、音频
|
 |
36
7gugu 2023-11-07 16:44:49 +08:00
做的很棒，做成一个书签，直接从页面上提取 BV 号再跳转到 OP 的站点会更棒👍
|
 |
37
clouds 2023-11-07 16:50:36 +08:00
music free 支持 B 站，理论上可以实现同等功能，支持安卓/windows 客户端。
|
 |
38
zddhub 2023-11-07 17:49:43 +08:00
有用！支持 mp4 吗？
|
 |
39
voidmnwzp 2023-11-07 18:54:37 +08:00
分段视频怎么办呢
|
 |
40
AMZsowhat 2023-11-07 19:44:59 +08:00
好好好 提个建议 有没有可能做成 chrome/油猴插件呢 懒人会更爱
|
 |
41
yanyao233 2023-11-07 21:23:34 +08:00
哇哦，这 ui 好好看
|
 |
42
suyuyu 2023-11-07 21:38:09 +08:00
你这 ui 看着好爽啊
|
 |
43
shalingye 2023-11-07 22:00:06 +08:00 via Android
很不错，期待收藏夹同步工具开源，另外我觉得做成主站域名加字符跳转比较好，识别到后面的链接为 b 站收藏夹就自动批量下载。
|
|
44
amber0317 OP |
 |
45
qike 2023-11-07 22:35:19 +08:00
好东西，用起来很方便
|
|
46
AMZsowhat 2023-11-07 23:46:03 +08:00
@amber0317 这个很棒，前几天因为需要下载一段音频内容，我要插件先下载视频（有的番剧还不给下载），然后转格式，几十秒的音频要折腾十多分钟才搞定- -
|
|
47
AMZsowhat 2023-11-07 23:47:56 +08:00
@AMZsowhat PS：格式划分如果更明确/可选就更 nice 了，一般有下载音频需求时希望的是尽可能无损 wav 之类的
|
 |
48
gbw1992 2023-11-08 08:56:11 +08:00 1
虽然用得少
但是作者这个产品设计思路很棒 |
 |
49
UKnowMe 2023-11-08 09:46:06 +08:00
很喜欢！之前就有这种想法。OP 可以考虑下做成浏览器插件，最好在 B 站视频页面中点击右键就有下载的按钮。
我还畅想着，配置自己的网易云账号，然后下载完之后，直接上传到一个自建的播客，这样就以后就无需再通过 B 站来收听。 支持 OP ！ |
 |
50
hanguofu 2023-11-08 10:37:48 +08:00
谢谢分享~ 顺便问问 ： 有没有 能批量下载 网易云 音乐的工具 ？
|
 |
51
Kaiv2 2023-11-08 11:21:50 +08:00
一个合集只下载地一首歌？
|
 |
52
maymay5 2023-11-08 11:39:24 +08:00
UI 很好看，但是输入框还是有必要的，我一个 WEB 开发从业人员，看到你的提示都愣了一下，普通用户怕是不太会用
|
 |
53
PyCode 2023-11-08 14:23:34 +08:00
我去，前段时间我在 google 上搜到过你的网站，还试了下哈哈，下载流程不错，就是下载的音质好像不高，这个是 b 站接口限制？
|
 |
54
buqizao 2023-11-08 16:09:13 +08:00
很不错的思路，对 WASM 开始感兴趣了，看来能做的东西比 Javascript 要多
|
 |
55
unii23i 2023-11-09 09:24:36 +08:00
我 10 年前陆陆续续下了 niconico 80 个 g ，当时见到喜欢的音乐、视频好要存起来，反正绝对不是当做素材用的，直到现在都没有再打开过，因为总会有新东西
|
 |
56
FoolgryWang 364 天前
|
 |
57
X-Force 361 天前
处于维护模式？无法使用
|
Select Language