作者分享了自己开发音乐播放网站的经历，原本通过修改响应Range提升加载速度，但因浏览器更新音频逻辑导致失效，转而采用Media Source与Blob URL重构方案。B站使用的M4A格式兼容性良好，借助mp4-box.js库可高效处理分片加载，关键在于buffer需与MPEG-4的box结构对齐。项目动机包括整合分散资源、自定义播放逻辑（如机器学习索引曲风）、统一音量、支持移动端等。技术架构包含Vercel托管的Next.js前端与API，另设阿里云API解决境外访问B站缓慢问题。作者还提及更新密钥至五年有效期，并附带开发过程中的趣味截图。
注: prompt
我在写博客, 希望有一段摘要。接下来我会给你一段文字, 给我一段纯文本(不要换行, 不要用markdown语法, 不要用emoji), 作为摘要, 300字以内, 不要出现链接, 用中文书写
文本如下:
(文本)
也是当成博客用了, 乐
不管, 首先是(忽略我的塑料英语)
好吧, 确实太塑料了, 得改
一个开箱即用的状态检测页面, 很好用:kener
关键是为什么老的逻辑会挂: 最近它们更新了音频那块的逻辑 所有浏览器一样, edge和chrome都改掉了 本来我是通过强制修改响应的range, 比如你请求0-最后, 我就给你返回30,0000bytes来提高响应速度 但是新版本这个不行, 似乎加入了判断逻辑导致这个响应不会被接受 所以我不得不通过media source + blob url重新搞了一个, 手写了一下获取逻辑 b站用的m4a是mpeg 4家族的, 浏览器都有兼容, 也有现成库(mp4-box.js好用) 很重要的一点是: media source的append buffer方法的那个buffer必须和box(mpeg-4里面会有一堆box, 放不同的东西, 比如文件信息, 乐曲本体这种)对齐, 所以b站的请求你会发现range都是一些很奇怪的数字, 不是整数
因为线上平台用的格式肯定是可以分片加载的(你也不想b站上一个2h的视频必须全下载下来才能放吧), 所以很爽
说一说我在干什么吧: 这是一个播放音乐的网站 不用现有的大型音乐播放平台是因为
- 乐曲资源分散, 新建一个可以整合所有资源(当然比如qq音乐要登陆有点难度)
- 便于控制播放逻辑 (我们可以玩点高级的比如说给乐曲用机器学习建索引, 然后控制播放乐曲风格这类)
- 音量统一(你也不想第一首曲子是蚊子叫, 第二首震碎耳膜吧)
- 移动设备支持 (网页可以说是兼容性最好的了) ...
所以, 我有一个在vercel上的nextjs网站, 一个也在vercel上的api(拆出来比较好对吧) 另外一个在阿里云的api, 因为国外访问b站老慢了 (cors发力了, 不得不干)
然后接着上一个帖子说的密钥过期, 我给签了一个5年的:
乐子: