【Code With SOLO】用 SOLO 10 分钟写了我梦想实现的音乐创作软件

SOLO挑战赛专区
1

摘要：“雅律工坊”小菜鸟第一次玩，试试玩玩。

背景：我是初中生，我从小学习了两种乐器，我爱音乐，我想创作。

实践过程：

:musical_note: 音乐创作工作室 (Music Creator Studio)

一个基于 Web Audio API 的音乐创作应用，支持录音、声音分析、风格转换和曲谱生成。

:sparkles: 功能特性

:microphone: 录音功能

  • 实时麦克风录音

  • 音频可视化（频谱显示）

  • 录音预览和保存

  • 本地音乐库管理

:magnifying_glass_tilted_left: 声音分析

  • 基频检测 (Fundamental Frequency)

  • 平均频率计算

  • 频率范围分析

  • 音高估算（音符识别）

  • 智能风格推荐

:musical_keyboard: 风格转换

  • 古典音乐风格

  • 国风新潮风格

  • 流行音乐风格

  • 深沉低音风格

:open_book: 曲谱生成

  • 从录音提取主要音符

  • 可视化曲谱展示

  • 音名和八度显示

:headphone: 音乐播放

  • 四种风格化音乐播放

  • 和弦伴奏系统

  • 音量控制

  • 空格键快捷暂停/继续

:rocket: 快速开始

在线预览

直接访问 GitHub Pages：https://yourusername.github.io/music-creator-studio

本地运行

方法一：使用 Python（推荐）

# 克隆仓库
git clone https://github.com/yourusername/music-creator-studio.git

# 进入项目目录
cd music-creator-studio

# 启动本地服务器
python3 -m http.server 8000

# 打开浏览器访问
open http://localhost:8000

方法二：使用 Node.js

# 安装依赖（如需部署）
npm install

# 启动开发服务器
npm start

# 打开浏览器访问
open http://localhost:8000

:file_folder: 项目结构

music-creator-studio/
├── index.html          # 主应用文件
├── package.json        # 项目配置
├── README.md          # 项目说明
└── assets/            # 静态资源（如需要）
    └── ...

:hammer_and_wrench: 技术栈

  • 前端框架: 原生 HTML5 / CSS3 / JavaScript (ES6+)

  • 音频处理: Web Audio API

  • 可视化: Canvas API

  • 数据存储: LocalStorage

:mobile_phone: 兼容性

浏览器 版本要求 状态
Chrome 60+ :white_check_mark: 支持
Firefox 55+ :white_check_mark: 支持
Safari 11+ :white_check_mark: 支持
Edge 79+ :white_check_mark: 支持

:gear: 使用说明

  1. 录音: 进入「录音」页面，点击录制按钮开始录音，再次点击停止

  2. 保存: 录音完成后点击保存到音乐库

  3. 分析: 在「声音分析」页面选择录音进行分析

  4. 转换: 在「风格转换」页面选择录音并点击目标风格

  5. 曲谱: 在「曲谱生成」页面生成可视化曲谱

  6. 播放: 在「播放音乐」页面选择风格并播放

:memo: 注意事项

  • 确保浏览器允许麦克风权限

  • 使用耳机获得更好的录音效果

  • 录音时长建议5-10秒

  • 音频数据仅存储在本地浏览器中

:page_facing_up: 许可证

MIT License - 详见 LICENSE 文件

:handshake: 贡献

欢迎提交 Issue 和 Pull Request！

:musical_notes: 享受音乐创作的乐趣！

1 个赞