分享一个音乐与有声书结合的 H5

🎧 主要特色 集成音乐和有声书,已完成功能:音乐和有声书首页,歌单页,播放页,个人中心,收藏,历史记录,登录等,整体完成度很高 注意:这个项目只是前端,你可以自建音源服务,直接拿 Cordova 构建 APK ,搞一个自用音乐 APP,美翻天~ 项目介绍

前端框架:

Next.js 15 (基于 React 19) TypeScript 作为主要开发语言

UI 组件库:

Radix UI 作为底层无样式组件库 shadcn/ui 作为高级组件系统 Tailwind CSS 用于样式设计

核心功能模块:

音乐播放器(支持基础播放控制功能) 播放列表管理 歌曲收藏功能 最近播放记录 同时支持音乐和有声书两种内容类型 聚合搜索功能

组件结构:

UI 组件:基于 shadcn/ui 和 Radix UI 的基础 UI 元素 功能组件:MusicPlayer 、AudiobookPlayer 、SongCard 等 骨架屏(Skeletons)用于加载状态显示

音频处理:

全局单例音频元素避免重复创建 统一的播放控制接口 进度条和时间显示 播放错误处理

💻 源码地址 [https://github.com/kibble5788/MusicNest](https://github.com/kibble5788/MusicNest 🐟预览 https://music.kudown.vip

如果你看完,是不是觉得像是 AI 写的? 哈哈 ,是的,我的 v0.dev 可是花了一个月的 RMB ,写出来的成果!