# albert-music-frontend **Repository Path**: albert-chen04/albert-music-frontend ## Basic Information - **Project Name**: albert-music-frontend - **Description**: 用uni-app写的音乐网站前端，可打包为html5,小程序,app - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2025-09-27 - **Last Updated**: 2026-03-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Albert Music - 前端项目 ![Vue.js](https://img.shields.io/badge/Vue.js-3.4.21-brightgreen.svg) ![Vite](https://img.shields.io/badge/Vite-5.2.8-blueviolet.svg) ![Pinia](https://img.shields.io/badge/Pinia-3.0.3-yellow.svg) ![uni-app](https://img.shields.io/badge/uni--app-3.0.0--4070620250821001-blue.svg) ![SCSS](https://img.shields.io/badge/SCSS-supported-pink.svg) 一个为 SNH48 GROUP 偶像(包括在团退团毕业)粉丝打造的非盈利性音乐收藏平台，专注于收录、整理和分享成员们的翻唱作品。基于 Vue 3 + uni-app 构建的现代化跨平台音乐流媒体应用，提供完整的音乐播放、歌单管理和社交互动体验。 **🌐 在线访问:** [https://abm48.com](https://abm48.com) ## 📱 平台支持 - **H5/Web** - 主要平台，支持桌面端优化 - **Android App** - 原生 Android 应用 > 目前专注于 H5 和 Android 两个平台的深度优化。 ## ✨ 功能特性 ### 核心音乐体验 - **曲库浏览**: 支持分页加载、无限滚动，展示完整的歌曲列表。 - **高级播放器**: - 全局悬浮，跨页面不中断播放。 - 支持**列表循环**、**单曲循环**、**随机播放**三种模式。 - 精确的进度条拖拽和时间显示。 - 歌曲封面大图预览。 - **多维度排序**: 支持按**翻唱日期**、**点赞数**、**评论数**等多种方式对歌曲列表进行排序。 - **强大而智能的搜索**: - 支持多关键词（空格分隔）的模糊搜索。 - **智能联想**: 提供歌曲、歌单、歌手、语种、状态、日期的实时搜索建议，支持点击自动定位。 - **交互优化**: 深度优化的移动端搜索体验（防抖、自动收起键盘、防误触回弹）。 - 支持在歌单内部进行**本地快速筛选**。 - **成员档案（成员简介）**: - 在歌曲卡片/播放器中点击成员名，可跳转到成员档案页。 - 展示成员简介、Catch Phrase、入团经历、**总选排名数据**与精选照片。 - **歌曲下载**: 支持单首歌曲或当前列表的**批量打包下载**。 ### 强大的歌单系统 - **个人歌单**: - 支持创建、重命名、删除个人歌单。 - 支持**拖拽排序**歌单列表和歌单内的歌曲列表（H5 端使用 SortableJS；App 端使用 renderjs 组件封装的 SortableContainer + SortableJS）。 - “我喜欢的音乐”自动聚合所有点赞歌曲。 - **公共歌单**: - 可将个人歌单**发布**为公共歌单，与所有用户分享。 - 支持分页浏览所有公共歌单。 - 支持**收藏**（点赞）和**克隆**他人分享的公共歌单。 ### 完善的社交与互动 - **多级评论系统**: - 支持对歌曲和公共歌单进行评论。 - 支持对一级评论进行**回复**（二级评论）。 - 支持**点赞**、**修改**和**删除**自己的评论。 - **完整的通知中心**: - **分类展示**: 将通知分为“评论和赞”与“系统通知”。 - **实时角标**: 在个人中心和 TabBar 上显示总未读数，各分类也显示独立未读数。 - **精确跳转**: 点击通知可直接跳转到对应的评论、歌单或歌曲位置，并高亮显示。 - **私信系统**: - 支持用户之间进行一对一私信。 - 完整的会话列表和聊天界面。 - **实时未读数**统计到每个会话和总览。 - **个人主页系统**: - 支持用户修改头像、用户名、个人简介和密码。 - 可访问他人主页，查看其公开的歌单等信息。 ### 🎵 播放器架构 应用采用双层播放器设计： - **底部悬浮播放器**: 始终显示在页面底部，提供基础播放控制和歌曲信息 - **全屏播放器页面**: 点击底部播放器展开，提供详细的歌曲信息、歌词、评论等 #### H5 端播放器特性 - **响应式布局适配**: - **桌面模式**: 当屏幕宽度 > 768px 且非移动端设备时，开启分栏式宽屏布局，左侧封面控制区，右侧信息互动区。 - **移动模式**: 针对小屏幕优化，采用 Swiper 滑动交互切换播放与详情。 - **高级动效**: H5 端使用 SVG SMIL 动画（``）实现播放音轨跳动效果，性能更佳且视觉更细腻。 - **浏览器交互**: - 支持 `window.resize` 动态界面适配。 - 外部链接支持新标签页跳转（`_blank`）。 - 音频引擎使用 `createInnerAudioContext`（浏览器环境），不涉及系统通知栏/MediaSession。 #### Android App 播放器特性 - **性能优化**: 针对 Android 原生视图进行优化，使用 CSS 动画（`keyframes`）替代 SVG 动画以保证运行流畅。 - **移动端优化的触控交互**: 手势操作（滑动切歌、拖拽进度条）。 - **后台播放支持**: 应用切换到后台时音乐不中断（通过 uni-app 原生插件支持）。 #### Android 通知栏（仅展示，无控制按钮） Android 端使用原生前台 Service + MediaSession 实现系统通知展示：在通知栏/锁屏等位置显示歌曲封面、歌名、翻唱者与应用小图标。**不提供上一首/下一首/播放/暂停等任何系统级控制按钮**（通知栏折叠/展开、锁屏、系统媒体中心均无控制入口）。 实现要点： - **原生前台 Service**: `android-studio-project/simpleDemo/src/main/java/albert/music/MediaPlaybackService.java` - 创建/更新通知与封面显示。 - 不添加 `Notification.Action`，并将 `PlaybackState` 的 `actions` 设为 `0`，确保系统不展示媒体控制按钮。 - **JS -> 原生状态同步**: `src/utils/mediaSessionHelper.js` - 通过显式 Intent 向 `MediaPlaybackService` 发送： - `com.albert.music.SERVICE_START` - `com.albert.music.SERVICE_UPDATE_METADATA` - `com.albert.music.SERVICE_UPDATE_STATE` - `com.albert.music.SERVICE_UPDATE_COVER` - 封面会下载到 app 文件系统（例如 `_doc/cover_temp.jpg`），然后传递本地路径给原生通知显示。 - **通知渠道**: `src/utils/nativeHelper.js` - Android 8+ 创建通知渠道（包括 `uni_audio_channel`），确保通知可见且行为一致。 - **启动初始化**: `src/utils/androidNotificationBoot.js` + `src/App.vue` - App 启动时处理通知权限、创建渠道并启动前台 Service（H5 端不执行）。 ### 🎵 平台差异对比 | 功能特性 | H5/Web 端 | Android App 端 | | :--- | :--- | :--- | | **界面布局** | 响应式（宽屏/窄屏自适应） | 固定移动端布局 | | **滚动体验** | 浏览器原生 `scrollIntoView` | `uni.pageScrollTo` 系统滚动 | | **文件处理** | **下载**: 浏览器调用 `ArrayBuffer` 转 ZIP | **缓存**: 本地文件系统 IO 缓存 | | **动画实现** | SVG SMIL (原生矢量动画) | View + CSS keyframes | | **外部链接** | `window.open(..., '_blank')` | 按页面策略：`plus.runtime.openURL` 或复制到剪贴板 | | **分享方式** | Web Share API / 链接复制 | 完整文案粘贴板分享 | | **顶部间距** | 标准 60px 标题栏 | 60px + 系统状态栏避让 | | **静音逻辑** | 忽略系统物理静音开关 | 遵循系统音量逻辑 | | **后台播放** | ❌ 页面隐藏后受限 | ✅ 完整支持 | | **下载体验** | 支持批量 ZIP 打包下载 | 支持单曲/批量静默缓存 | | **键盘支持** | ✅ 空格播放/暂停等快捷键 | ❌ 仅限触控 | | **拖拽排序** | SortableJS | SortableContainer(renderjs) + SortableJS | ### 🔍 H5 端独有技术细节 - **局域网调试**: 在部分页面/组件中会根据当前访问域名动态替换 API Host，方便局域网多设备联调（实现分散在多个组件中，并非集中在一个工具函数）。 - **混合分享逻辑**: 优先尝试调用 `navigator.share`（原生系统分享弹窗），在不支持的浏览器中自动降级为“文案+链接”的剪贴板复制。 - **自动化下载管理**: 针对 H5 端的批量下载，系统会自动根据批次大小（每 20 首一包）进行队列式 Zip 打包下载，避免浏览器单次下载文件过大。 - **精细化 UI 控制**: 针对移动端 H5 访问，系统会自动隐藏歌曲卡片中的“语言”和“状态”标签，以确保在窄屏下的视觉整洁。 ### 内容贡献 - **歌曲上传**: 提供完整的上传表单，支持上传音频和封面（或选择已有封面），提交后进入后台审核流程。 ## 🚀 技术栈 ### 核心框架 - **[Vue 3](https://vuejs.org/)** (3.4.21) - 使用 Composition API 和 `