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

主要色

集成音乐和有声书，已完成功能：音乐和有声书首页，歌单页，播放页，个人中心，收藏，历史记录，登录等，整体完成度很高

注意：这个项目只是前端，你可以自建音源服务，直接拿 Cordova 构建 APK ,搞一个自用音乐 APP,美翻天~

项目介绍

1. 前端框架：

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

2. UI 组件库：

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

3. 核心功能模块：

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

4. 组件结构：

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

5. 音频处理：

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

源码地址

[https://github.com/kibble5788/MusicNest](https://github.com/kibble5788/MusicNest

预览

https://music.kudown.vip

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