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