随着移动互联网与数字音乐产业的发展，用户的听歌需求日益多元化，除了收听现成音乐，越来越多的普通用户希望参与音乐创作，但专业音乐制作存在作词、作曲、编曲门槛高、周期长、成本高的问题。与此同时，AIGC 技术的成熟让 "一句话生成歌曲" 成为可能，而现有音乐产品大多停留在 "听歌" 层面，将 AI 创作、创作者社区与多端覆盖相结合的产品仍然较少。本项目旨在解决普通用户 "想创作却不会写词谱曲" 以及音乐爱好者缺少垂直交流社区的问题，打造一款集音乐发现、在线播放、AI 创作、社区互动于一体的跨平台音乐应用。
产品面向音乐爱好者、校园学生、短视频创作者、独立音乐人等群体，适用于休闲听歌、个性化音乐探索，以及用 AI 快速生成生日祝福歌、校园民谣、解压小曲等场景；通过 "蛙币" 虚拟积分对 AI 创作计费，结合作品审核上架、创作者主页、关注评论等机制，形成 "创作 — 发布 — 传播 — 消费" 的音乐内容闭环，覆盖微信小程序、H5 网页及 Android/iOS App 多端用户。
项目主要包含五大功能模块：
1、音乐推荐与首页：提供原创精品、AI 创作精品双专区，以及宝藏歌曲、分类排行榜、新歌速递、热门音乐人推荐等内容，支持快捷播放与评论。
2、音乐播放器：提供完整播放能力，支持播放队列管理，顺序播放、单曲循环、随机播放三种模式，上一首 / 下一首、进度拖拽、歌词逐行同步高亮，迷你播放条全局常驻；微信小程序端支持后台播放、锁屏封面与锁屏切歌，H5 端支持空格键快捷播放暂停。
3、AI 音乐创作：内置 Suno AI 能力，提供 "简单模式"（一句话描述灵感、自动写词谱曲）与 "自定义模式"（指定歌名、歌词、风格）；支持民谣、国风、流行、嘻哈、R&B、电子六种风格，治愈、伤感、励志、浪漫等八种情绪，可选人声 / 纯音乐、男声 / 女声及 V4/V4.5/V5 模型；按 "蛙币" 计费，生成过程实时显示进度，支持离开页面后后台轮询，完成后自动转存音频、封面、歌词到本站。作品可在 "我的作品" 中试听并提交审核，审核通过后上架曲库。
4、发现与搜索：按分类浏览歌曲、查看分类精选歌单，支持关键词搜索。
5、社区与个人中心：提供社区动态、歌曲评论、关注创作者、作者主页；个人中心支持我的收藏、播放历史、我的作品、资料编辑、邀请码注册与系统设置等。
我在项目中独立负责整体架构设计与全部前端开发工作，包括：跨端工程搭建、首页与播放器开发、AI 创作链路对接、社区与个人中心模块开发、接口封装与状态管理，以及多端适配与打包发布。
技术栈与架构：项目基于 UniApp 3.0 + Vue 3（Composition API）+ Vite 5 + Sass 构建，一套代码编译到微信小程序、H5、Android/iOS 多端；采用主包加分包的页面架构并配置预加载规则，使用自定义导航栏与自定义 TabBar 实现沉浸式体验；基于 uni.request 封装统一请求层，自动携带 JWT Token，结合 Vue 响应式状态与 uni.storage 实现登录态、播放状态和设置项的持久化。
实现亮点与难点：一是多端音频差异处理，微信小程序采用 BackgroundAudioManager 实现后台播放与锁屏控制，App/H5 采用 InnerAudioContext；针对 App 端 onTimeUpdate、onPlay 回调经常不触发的问题，设计 250ms 进度轮询兜底与缓冲防抖机制，保证播放状态与界面一致。二是 AI 异步创作链路，生成任务耗时数分钟，设计了任务状态轮询、离开页面后的后台轮询、草稿暂存、完成去重通知与防重复生成机制，并将第三方音频、封面、歌词自动转存本站，过滤流媒体临时地址，保证作品长期可播放。
评论