Azusa-Player：Bilibili 第三方音频播放器

项目介绍

Azusa-Player，中文名为"电梓播放器"，是一款专为 Bilibili 用户设计的第三方音频播放器。它以浏览器扩展插件的形式存在，旨在将 Bilibili 上的视频内容轻量化为音频，方便用户在不同场景下享受音乐。

功能特点

• 音频轻量化：将 Bilibili 视频转换为纯音频格式，节省带宽和存储空间
• 歌单管理：支持单 P/多 P 视频搜索，方便用户管理和分类歌单
• 歌词搜索：自动提取歌名并搜索匹配的歌词
• 跨平台支持：支持 Chrome 和 Microsoft Edge 浏览器
• 离线安装：提供离线安装包，方便用户本地安装使用

技术架构

Azusa-Player 采用了现代化的技术栈：

• Chrome Extension MV3：基于最新的 Chrome 扩展 Manifest V3 规范开发
• React 框架：使用 React 17.0.2 构建用户界面
• Material-UI：采用 MUI 组件库提供美观的界面设计
• TypeScript：使用 TypeScript 增强代码的可维护性
• Webpack 5：使用现代化的构建工具进行项目打包

核心组件

项目包含多个功能模块：

• 播放器组件：基于 react-jinke-music-player 实现音频播放功能
• 歌词显示：使用 react-lrc 组件实现歌词同步显示
• 数据管理：通过自定义的 Storage 和 Data 类管理本地数据
• 背景处理：使用 Service Worker 处理后台任务

安装方式

Chrome 商店安装

可以通过 Chrome 网上应用店搜索"电梓播放器"进行安装

Microsoft Edge 安装

在 Microsoft Edge 扩展商店中搜索安装

离线安装

1. 下载最新的发布版本文件
2. 解压下载的文件
3. 打开 Chrome 浏览器，进入扩展程序页面
4. 开启开发者模式
5. 点击"加载已解压的扩展程序"，选择解压后的文件夹

开发环境搭建

要参与项目开发，需要先搭建本地开发环境：

git clone https://gitcode.com/gh_mirrors/az/azusa-player
cd azusa-player
npm install
npm run dev

项目结构

azusa-player/
├── src/
│   ├── components/     # React 组件
│   ├── objects/        # 数据模型
│   ├── utils/          # 工具函数
│   ├── background/     # 后台处理
│   └── popup/          # 弹出窗口
├── public/
│   ├── img/           # 图片资源
│   └── icons/         # 图标资源
└── package.json       # 项目配置

使用说明

安装扩展后，点击浏览器工具栏中的电梓播放器图标即可打开播放器界面。用户可以通过搜索功能查找 Bilibili 视频，将其添加到播放列表中进行音频播放。播放器支持歌词显示、歌单管理、音频下载等功能。

技术亮点

1. 现代化的 Chrome 扩展架构：采用 Manifest V3，更加安全和高效
2. 响应式界面设计：使用 Material-UI 提供一致的用户体验
3. 类型安全的开发：全面使用 TypeScript 进行开发
4. 模块化组件设计：组件之间耦合度低，易于维护和扩展

开源协议

本项目基于 MIT 许可证开源发布，用户可以自由使用、修改和分发。项目同时遵循对版权内容的尊重原则，要求用户在 24 小时内清除使用过程中产生的版权数据。

Azusa-Player 不仅是一个功能强大的音频播放器，更是一个开源社区的优秀作品。无论你是音乐爱好者还是开发者，都值得体验这款轻量级的 Bilibili 第三方音频播放器。