🎛️ Flux Grid | Sonic Architecture

Flux Grid 是一个基于 Web Audio API 构建的运行在浏览器中的现代音乐步进音序器（Step Sequencer）。

它摒弃了传统的采样堆叠，完全通过代码实时合成音频（Real-time Synthesis），结合赛博朋克风格的 Canvas 视觉界面，提供了一个沉浸式的 64 步（4小节）音乐创作环境。

🚀 点击这里直接在线体验

---

✨ 核心特性 (Features)

🎹 音频引擎 (Audio Engine)

• 纯代码合成：没有使用任何 MP3 采样，所有声音（Kick, Snare, HiHat, Synths）均由振荡器（Oscillators）实时生成。
• 多层合成器：
  • SuperSaw Lead：模拟 EDM 经典的宽声场七层锯齿波。
  • Pluck Synth：带有低通滤波器包络（Filter Envelope）的拨弦音色。
  • Punchy Drums：基于频率包络调制的底鼓与合成军鼓。
• 效果器链：内置混响（Convolver Reverb）、延迟（Feedback Delay）和动态压缩（Compressor）。

🎨 交互与视觉 (UI/UX)

• Cyberpunk HUD 界面：使用 HTML5 Canvas 绘制的高性能网格，带有霓虹辉光效果。
• 64-Step 序列：支持完整的 4 小节编曲，自动翻页跟随。
• 智能交互：支持点击绘图、拖拽操作，以及独立的轨道静音（Mute）与独奏（Solo）。

💿 预设系统 (Preset System)

• 内置多种风格的演示曲目，展示引擎能力：
  • 🏖️ Tropical House (Chill, Pluck sounds)
  • 🌃 Cyberpunk / Techno (Epic, SuperSaw leads)
• User Mode：空白画板，自由创作。

---

🛠️ 技术栈 (Tech Stack)

• Core: Vanilla JavaScript (ES6 Modules)
• Audio: Web Audio API (AudioContext, OscillatorNode, ConvolverNode)
• Visuals: HTML5 Canvas API
• Styling: CSS3 (Glassmorphism, CSS Variables, Grid Layout)
• Fonts: Orbitron & Rajdhani (Google Fonts)

---

🚀 如何运行 (Quick Start)

在线运行 (GitHub Pages)

本项目完全支持静态部署。

1. Fork 或 Clone 本仓库。
2. 进入仓库的 Settings -> Pages。
3. 在 Source 中选择 main 分支并保存。
4. 等待几秒钟，点击生成的链接即可使用！

本地运行 (Local Development)

由于项目使用了 ES6 Modules (import/export)，直接双击 index.html 无法运行（会报 CORS 错误）。你需要一个本地服务器。

推荐方式 (VS Code):

1. 安装 Live Server 插件。
2. 右键点击 index.html。
3. 选择 Open with Live Server。

或者使用 Python:

# 在项目根目录下运行
python -m http.server 8000
# 然后在浏览器访问 http://localhost:8000

或者直接访问打包好的项目： https://nebula-rhythms.vercel.app