A minimalist 8-bit music generator with a trendy pixel art UI. Create classic game-style 8-bit music effortlessly and experience the joy of retro game music creation.
- BPM (60-180): Control the tempo of your music
- Scale (C Major/Minor, etc.): Choose the musical scale
- Complexity (Levels 1-3): Adjust the complexity of the music
- Random Seed (0-99999): Generate new music patterns with specific seeds
- Web Audio API: Generate 8-bit style music using square/sawtooth waves
- Waveform Visualization: See your music through HTML5 Canvas visualization
- 16-bar Loop: Fixed music structure for classic chiptune feel
- Preset Chord Progressions: Classic progressions like I-IV-V-I
- WAV Export: Save your generated music as WAV audio files
- VIBRATO: 8-bit style vibrato effects, from NES to GameBoy classic sounds
- PORTAMENTO: Step-like portamento effects, simulating early game console hardware limitations
- React + TypeScript: Frontend framework
- Vite: Build tool
- Tailwind CSS: Styling framework
- Lucide Icons: Icon library
- Web Audio API: Audio processing
npm installnpm run devnpm run build- Build the project
- Create a new project in Cloudflare Pages
- Connect your Git repository
- Set build command to
npm run build - Set build output directory to
dist
/public
/icons
- favicon.svg # SVG website icon
- favicon.ico # ICO format website icon
- favicon-16x16.png # 16x16 pixel website icon
- favicon-32x32.png # 32x32 pixel website icon
- apple-touch-icon.png # iOS application icon
- manifest.json # PWA manifest
/src
/audio
- AudioEngine.ts # Audio generation engine
/components
- ControlPanel.tsx # Parameter control panel
- WaveformVisualizer.tsx # Waveform visualization component
- UserGuide.tsx # Bilingual user guide component
- App.tsx # Main application component
- index.css # Global styles
- fonts.css # Font definitions including Zpix for Chinese
- main.tsx # Entry file
- Added an 8-bit style music note icon as the website favicon
- Supports multiple formats and sizes, compatible with different devices and browsers
- Title: Optimized website title to "8-bit Music Maker | Create Retro-style Chiptune Music"
- Description: Added detailed website description to improve search engine visibility
- Keywords: Added keywords including 8-bit, chiptune, music creation, etc.
- Added Open Graph tags to optimize sharing display on social media
- Implemented a comprehensive bilingual user guide (English/Chinese)
- Detailed explanations of all features and parameters
- Pixel-style UI consistent with the application theme
- Chinese content uses Zpix pixel font for authentic 8-bit style
MIT
一个极简的 8-bit 音乐生成工具，具有像素化潮流 UI 风格。让你轻松创建经典游戏风格的 8-bit 音乐，体验复古游戏音乐的创作乐趣。
- BPM (60-180): 控制音乐的速度
- 音阶 (C 大调/小调等): 选择音乐的调式
- 节奏复杂度 (1-3 级): 调整音乐的复杂程度
- 随机种子 (0-99999): 使用特定种子生成新的音乐模式
- Web Audio API: 使用方波/锈齿波生成 8-bit 风格的音乐
- 可视化波形: 通过 HTML5 Canvas 实现波形可视化
- 16 小节循环: 固定的音乐结构，营造经典芯片音乐感觉
- 预设和弦进行: 使用经典的 I-IV-V-I 和弦进行
- WAV 导出: 将生成的音乐导出为 WAV 音频文件
- 颚音(VIBRATO): 8-bit 风格的颚音效果，从 NES 到 GameBoy 的经典音效
- 滑音(PORTAMENTO): 阶梯式的滑音效果，模拟早期游戏机的硬件限制
- React + TypeScript: 前端框架
- Vite: 构建工具
- Tailwind CSS: 样式框架
- Lucide Icons: 图标库
- Web Audio API: 音频处理
npm installnpm run devnpm run build- 构建项目
- 在 Cloudflare Pages 中创建新项目
- 连接 Git 仓库
- 设置构建命令为
npm run build - 设置构建输出目录为
dist
/public
/icons
- favicon.svg # SVG 格式的网站图标
- favicon.ico # ICO 格式的网站图标
- favicon-16x16.png # 16x16 像素的网站图标
- favicon-32x32.png # 32x32 像素的网站图标
- apple-touch-icon.png # iOS 设备上的应用图标
- manifest.json # PWA 应用清单
/src
/audio
- AudioEngine.ts # 音频生成引擎
/components
- ControlPanel.tsx # 参数控制面板
- WaveformVisualizer.tsx # 波形可视化组件
- UserGuide.tsx # 双语用户指南组件
- App.tsx # 主应用组件
- index.css # 全局样式
- fonts.css # 字体定义，包括中文像素字体 Zpix
- main.tsx # 入口文件
- 添加了 8-bit 风格的音符图标作为网站 favicon
- 支持多种格式和尺寸，适配不同设备和浏览器
- Title: 优化网站标题为"8-bit Music Maker | 创建复古风格的芯片音乐"
- Description: 添加详细的网站描述，提高搜索引擎可见性
- Keywords: 添加关键词，包括 8-bit、chiptune、音乐创作等
- 添加 Open Graph 标签，优化在社交媒体上的分享展示
- 实现了全面的双语用户指南（英文/中文）
- 详细解释了所有功能和参数
- 像素风格的 UI，与应用主题保持一致
- 中文内容使用 Zpix 像素字体，呈现真正的 8-bit 风格
MIT