用代码复原 Nujabes 的 Luv(sic) - 致敬传奇制作人 Jun Seba (1974-2010)
一个基于 Web 的 Lo-Fi Jazz Hip-Hop 音乐生成器，使用 Tone.js 实时合成音频，复刻 Nujabes 经典作品 Luv(sic) Part 3 的音乐风格。
┌─────────────────────────────────────────────────┐
│ NUJABES × SHING02 │
│ │
│ Luv(sic) Part 3 │
│ Modal Soul (2005) │
│ │
│ "So I keep on, riding my saddle │
│ Until I find my own place in the │
│ Shadowless night" │
│ │
│ ▶ PLAY ■ STOP │
│ │
│ BPM [====●=====] 100 │
│ SWING [======●===] 45% │
│ LO-FI [====●=====] 35% │
│ │
│ TRACKS │
│ [M][S] Drums ████████░░ 75% │
│ [M][S] Piano ███████░░░ 70% │
│ [M][S] Bass ████████░░ 78% │
│ [M][S] Vinyl ██░░░░░░░░ 15% │
└─────────────────────────────────────────────────┘
- 真实采样 - 钢琴使用 Salamander Grand Piano，鼓组和黑胶使用高质量采样
- 实时播放 - 基于 Tone.js 的 Web Audio 实时合成
- 参数控制 - BPM、Swing、Lo-Fi 效果可调
- 轨道混音 - 独立控制每个轨道的音量、静音、独奏
- MIDI 精确复刻 - 基于原曲 MIDI 分析的音符数据
| 层级 | 技术 |
|---|---|
| 框架 | Next.js 14 (App Router) |
| 音频引擎 | Tone.js |
| 状态管理 | Zustand |
| 样式 | Tailwind CSS |
| 语言 | TypeScript |
基于 MIDI 文件的精确分析：
BPM: 100
Key: Ab Major
Chord Progression:
│ Fm7 │ Bbm7 │ Eb7 │ Abmaj7 │
│ vi │ ii │ V │ I │
Structure:
- Piano Melody: Eb/Db 八度交替
- Accompaniment: 分解和弦琶音 (C-Ab-C, Bb-F-Bb)
- Bass Line: F → Bb → Eb → Ab/G/Eb
- Drums: Boom Bap pattern with swing
# 安装依赖
npm install
# 开发模式
npm run dev
# 生产构建
npm run build
npm run start访问 http://localhost:3000/music/luv(sic.)pt3
luv.code/
├── app/
│ ├── page.tsx # 主页
│ └── music/luv(sic.)pt3/ # Luv(sic) Part 3 页面
├── lib/
│ ├── audio/
│ │ ├── engine.ts # 音频引擎核心
│ │ ├── drums.ts # 鼓组 (真实采样 + 合成器备用)
│ │ ├── sampler-piano.ts # 钢琴 (Salamander 采样)
│ │ ├── bass-sequence.ts # Bass 序列
│ │ ├── effects.ts # Lo-Fi 效果链
│ │ └── pt3-manager.ts # Part 3 音频管理器
│ └── music/
│ └── luvsic-pt3.ts # 音乐数据 (MIDI 分析)
├── public/
│ └── samples/
│ └── vinyl-crackle.wav # 黑胶噪音采样
└── components/
├── Player.tsx # 播放器组件
└── TrackMixer.tsx # 混音器组件
| 音色 | 来源 | 许可 |
|---|---|---|
| Piano | Salamander Grand Piano | CC BY 3.0 |
| Drums | shiningjason/drum-sounds | MIT |
| Vinyl | Freesound: ALEFF-ATMOS | CC0 |
Audio Signal Flow:
┌─────────┐ ┌──────────┐ ┌────────┐ ┌────────────┐
│ Sources │ → │ Lo-Fi │ → │ Reverb │ → │ Compressor │ → Output
│ │ │ Filter │ │ │ │ │
└─────────┘ └──────────┘ └────────┘ └────────────┘
│
┌─────┴─────┐
│ Vinyl │
│ Noise │
└───────────┘
╭────────────────────────────────╮
│ │
│ Nujabes (Jun Seba) │
│ 1974.02.07 - 2010.02.26 │
│ │
│ "Music is the only way │
│ to express my emotions." │
│ │
╰────────────────────────────────╯
- Tone.js 音频合成与采样
- Web Audio API 效果链设计
- 实时音频参数控制
- MIDI 数据解析与播放
- Next.js 14 App Router
- React Hooks 状态管理
- TypeScript 类型安全
- Tailwind CSS 响应式设计
- 和弦进行分析 (Jazz Harmony)
- Boom Bap 节拍编程
- Lo-Fi 音效处理
- 混音与母带概念
欢迎贡献！可以：
- 添加新的 Nujabes 曲目复刻
- 优化音色和效果
- 改进 UI/UX 设计
- 修复 Bug
MIT
- Nujabes (Jun Seba) - 永远的灵感来源
- Shing02 - Luv(sic) 系列的灵魂
- Tone.js - 强大的 Web Audio 库
- Salamander Grand Piano - 美妙的钢琴采样
"May your beats live on forever."
Rest in beats, Nujabes. 🎹