B站音频歌单接口开发实战：基于哔哩哔哩-API收集整理的音乐收藏实现
项目地址: https://gitcode.com/GitHub_Trending/bi/bilibili-API-collect 你是否还在手动管理B站收藏的音乐？想开发个性化音乐收藏功能却苦于没有清晰的接口文档？本文将基于开源项目哔哩哔哩-API收集整理，带你从零实现音乐收藏功能，无需复杂编程知识，只需简单几步即可完成接口调用与数据处理。读完本文你将掌握：歌单信息获取、音乐收藏状态查询、歌曲详情提取的完整流程，以及前端展示的实现方案。
开发准备与API资源导航
在开始开发前，需要先了解项目的API文档结构。本项目的音频相关接口文档集中在docs/audio/目录下，包含三大核心文件：
- 音乐列表接口：music_list.md - 提供歌单创建、查询、修改功能
- 收藏操作接口：action.md - 实现音乐收藏状态查询与变更
- 歌曲信息接口：info.md - 获取音频详细 metadata 与歌词
项目采用RESTful风格设计API，所有接口支持标准HTTP方法，返回JSON格式数据。认证方式主要通过Cookie中的SESSDATA实现，部分公开接口（如热门歌单）无需登录即可调用。
核心接口解析与实战调用
1. 个人歌单列表获取
接口地址：https://www.bilibili.com/audio/music-service-c/web/collections/list
请求方式：GET
认证要求：需登录（Cookie包含SESSDATA和DedeUserID）
| 参数名 | 类型 | 内容 | 必要性 | 示例值 |
|---|---|---|---|---|
| pn | num | 页码 | 必要 | 1 |
| ps | num | 每页项数 | 必要 | 20 |
调用示例：
curl -G 'https://www.bilibili.com/audio/music-service-c/web/collections/list' \
--data-urlencode 'ps=2' \
--data-urlencode 'pn=1' \
-b 'SESSDATA=xxx;DedeUserID=1;'
返回数据包含歌单ID、标题、封面、歌曲数量等核心信息，其中sids数组存储收藏的音频ID列表，可用于后续获取具体歌曲信息。
2. 音乐收藏状态查询
接口地址：https://www.bilibili.com/audio/music-service-c/web/collections/songs-coll
请求方式：GET
认证要求：需登录
| 参数名 | 类型 | 内容 | 必要性 | 示例值 |
|---|---|---|---|---|
| sid | num | 音频auid | 必要 | 13598 |
调用示例：
fetch('https://www.bilibili.com/audio/music-service-c/web/collections/songs-coll?sid=13598', {
method: 'GET',
headers: {
'Cookie': 'SESSDATA=xxx;DedeUserID=1;'
}
})
.then(response => response.json())
.then(data => {
console.log('收藏状态:', data.data ? '已收藏' : '未收藏');
});
返回结果为布尔值，true表示已收藏，false表示未收藏。建议在前端实现收藏按钮状态切换时使用此接口做前置检查。
3. 歌曲详情信息获取
接口地址：https://www.bilibili.com/audio/music-service-c/web/song/info
请求方式：GET
认证要求：公开接口（部分信息需登录）
| 参数名 | 类型 | 内容 | 必要性 | 示例值 |
|---|---|---|---|---|
| sid | num | 音频auid | 必要 | 13598 |
返回数据包含歌曲标题、封面、时长、歌词URL等关键信息，其中statistic对象提供播放量、收藏数等统计数据。特别注意collectIds字段会返回该歌曲所在的所有歌单ID，可用于实现"歌曲在歌单中"的关联展示。
前端实现方案与最佳实践
页面布局与组件设计
推荐采用三栏式布局：左侧歌单列表、中间歌曲列表、右侧歌曲详情。使用国内CDN加载Vue.js和Element UI：
<!-- 国内CDN引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
核心组件关系如图所示：
收藏功能实现流程
- 初始化加载：页面加载时调用歌单列表接口，渲染左侧导航
- 歌单切换：点击歌单时，携带歌单ID调用歌曲列表接口
- 收藏状态展示：对每首歌曲调用收藏状态接口，渲染对应图标
- 收藏操作：点击收藏按钮时，调用收藏接口并实时更新UI
错误处理与性能优化
- 接口限流处理：实现请求队列，控制并发请求数（建议≤5）
- 缓存策略：对歌单列表和歌曲信息设置10分钟本地缓存（localStorage）
- 错误重试：网络错误时实现指数退避重试（最多3次）
- 加载状态：使用骨架屏替代传统loading，提升用户体验
功能扩展与商业化应用
基于基础收藏功能，可扩展实现以下高级特性：
- 智能推荐：分析
sids数组中的音频ID，调用热门榜单接口实现相似推荐 - 定时同步：利用浏览器
setInterval定期同步收藏状态，保持多端一致 - 离线播放：结合音频流接口实现缓存播放
- 社交分享：调用分享接口生成带封面的歌单卡片
企业级应用可考虑接入B站开放平台，通过OAuth2.0实现第三方登录，将音乐收藏功能集成到播客APP、智能家居等场景中。注意商业使用需遵守B站API使用规范，避免高频请求和数据滥用。
项目贡献与资源获取
本项目采用MIT开源协议，欢迎通过以下方式参与贡献：
- 接口补充：发现新接口可提交PR至docs/audio/目录
- 错误反馈：通过Issue报告接口变更或文档错误
- 代码优化：改进示例代码或添加新语言实现（如Python/Java SDK）
完整项目代码可通过以下地址获取：
git clone https://link.gitcode.com/i/1d1d74659f401ead69238820ae5d245e.git
建议定期同步 upstream 仓库，获取最新API更新。如有功能需求或技术问题，可在项目Discussion区发起讨论，社区维护者通常会在24小时内响应。
通过本文介绍的接口组合与实现方案，你可以快速构建一个功能完善的B站音乐收藏应用。无论是个人项目还是商业产品，都能从中获取稳定、可靠的API支持。立即动手实践，打造属于你的个性化音乐收藏体验吧！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
