AI编程启蒙课

主题

专题：用 AI 做音乐节拍机 ​

🎵 不会乐器也能做音乐？没错！今天我们来做一个网页版节拍机，用代码"演奏"你的原创节奏！

⏱️ 预计用时：45 分钟 | 📋 前置要求：学完第1-3课

你将做出什么？ ​

一个网页版音乐节拍机（Drum Machine / Beat Maker）！功能包括：

  • 多个音轨的网格，点亮格子就是添加一个节拍
  • 播放/暂停，听到你编排的节奏循环播放
  • 调节速度（BPM），想快就快想慢就慢
  • 预设节奏模式，一键加载经典节拍

音乐 + 编程 = ？ ​

你可能没想到，音乐和编程有很多共同点：

音乐编程
节拍是有规律的重复循环（for/while）也是有规律的重复
音符排列在时间线上数据排列在数组里
多个乐器同时演奏多个音轨同时播放
速度用 BPM 衡量程序用定时器控制节奏

BPM（Beats Per Minute） = 每分钟节拍数。120 BPM 就是每秒 2 拍，很常见的速度。

节拍机的原理 ​

节拍机的核心其实就是一个二维网格：

        第1拍  第2拍  第3拍  第4拍  第5拍  第6拍  第7拍  第8拍
底鼓：    ●     ○     ○     ○     ●     ○     ○     ○
军鼓：    ○     ○     ●     ○     ○     ○     ●     ○
踩镲：    ●     ●     ●     ●     ●     ●     ●     ●
  • 每一行是一个音轨（一种乐器）
  • 每一列是一个时间步（一拍）
  • ● 表示这个位置要发出声音，○ 表示静音
  • 程序从左到右扫描，遇到 ● 就播放对应的声音

小贴士

这种网格式的音乐编辑方式叫做 Step Sequencer（步进音序器）。几乎所有的电子音乐制作软件（FL Studio、Ableton）都用这种方式来编排节拍。你今天做的就是一个简化版！

Web Audio API：浏览器里的录音棚 ​

网页怎么发出声音呢？靠的是 Web Audio API —— 浏览器自带的音频引擎。

它可以：

  • 生成各种音调的声音（不需要音频文件！）
  • 控制音量、音高
  • 精确地在某个时间点播放声音
  • 同时播放多个声音
javascript
// 创建一个"录音棚"
const audioCtx = new AudioContext();

// 创建一个声音源（振荡器）
const osc = audioCtx.createOscillator();
osc.frequency.value = 440;  // 440Hz = 标准的 A 音
osc.connect(audioCtx.destination);  // 连接到扬声器
osc.start();  // 开始播放
想了解更多？

声音本质上是空气的振动。振动得快（频率高），声音就尖；振动得慢（频率低），声音就低沉。

  • 底鼓的声音：低频（100-200 Hz），短促
  • 军鼓的声音：中频（200-400 Hz），带噪音
  • 踩镲的声音：高频噪音，很短

Web Audio API 可以通过调整频率和波形来模拟这些乐器，不需要任何音频文件！

动手时间：做一个节拍机！ ​

第一步：创建项目 ​

bash
mkdir beat-maker
cd beat-maker
claude

第二步：创建基础节拍机 ​

魔法咒语

帮我做一个网页版节拍机（drum machine），要求：
1. 文件名叫 beat-maker.html，单个 HTML 文件
2. 音轨网格：
   - 4 个音轨：底鼓（Kick）、军鼓（Snare）、踩镲（Hi-Hat）、铜钹（Clap）
   - 每个音轨 16 步（16 个格子，代表 16 个时间步）
   - 点击格子切换激活/静音状态
   - 激活的格子高亮显示（每个音轨用不同颜色）
3. 声音合成（用 Web Audio API 生成，不需要音频文件）：
   - 底鼓：低频正弦波 + 快速衰减
   - 军鼓：带白噪音的中频声音
   - 踩镲：短促的高频白噪音
   - 铜钹：中长的白噪音
4. 播放控制：
   - 播放/暂停按钮
   - 播放时有一个光标从左到右扫描，扫到激活的格子就播放声音
   - 扫到最后一步后循环回到第一步
5. BPM 控制：滑块调节速度（60-180 BPM，默认 120）
6. 界面设计：
   - 深色背景（像专业音乐软件）
   - 格子有圆角，激活时有发光效果
   - 当前播放位置的列有视觉高亮
   - 每个音轨的名称在左侧显示

打开体验：

bash
start beat-maker.html

点亮一些格子，按下播放按钮，听听你编排的节奏！

第三步：理解核心代码 ​

定时器控制节拍

javascript
let currentStep = 0;
const bpm = 120;
const interval = (60 / bpm / 4) * 1000; // 毫秒

function playStep() {
    // 检查每个音轨在当前步是否激活
    tracks.forEach(track => {
        if (track.pattern[currentStep]) {
            playSound(track.type);  // 播放声音
        }
    });

    // 移动到下一步，到头了就回到第一步
    currentStep = (currentStep + 1) % 16;
}

setInterval(playStep, interval);

用 Web Audio API 生成底鼓

javascript
function playKick() {
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();

    osc.frequency.value = 150;       // 低频
    gain.gain.value = 1;
    gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.3);

    osc.connect(gain);
    gain.connect(audioCtx.destination);
    osc.start();
    osc.stop(audioCtx.currentTime + 0.3);  // 0.3秒后停
}

第四步：添加预设节奏 ​

魔法咒语

给节拍机添加预设节奏模式：
1. 添加一排"预设"按钮，包含这些经典节奏：
   - "四四拍基础"：底鼓在1、5、9、13拍，军鼓在5、13拍
   - "迪斯科"：底鼓每拍都有，军鼓在奇数拍
   - "嘻哈"：底鼓不规则分布，踩镲密集
   - "摇滚"：底鼓和军鼓交替，踩镲全满
   - "空白"：清空所有音轨
2. 点击预设按钮加载对应的节奏模式
3. 加载时有平滑的过渡动画

第五步：更多音乐功能 ​

魔法咒语

继续增强节拍机：
1. 音量控制：每个音轨有独立的音量滑块
2. 音色调节：
   - 底鼓：滑块调节音高（更低沉或更明亮）
   - 军鼓：滑块调节噪音量
3. 添加一个"旋律"音轨：
   - 8 个音高按钮（Do Re Mi Fa Sol La Si Do）
   - 每步可以选择一个音高
   - 播放时演奏对应的音符
4. 分享功能：
   - "复制链接"按钮，把当前节奏编码到 URL 参数里
   - 打开链接就能加载同样的节奏

进阶挑战 ​

  1. 录音功能：用 MediaRecorder API 录制几个循环的节拍，导出为音频文件
  2. 键盘模式：用键盘按键（A、S、D、F）实时演奏，像打鼓一样
  3. 可视化：添加音频可视化效果——播放时在画面上显示跳动的波形或频谱
  4. 合作创作：做两个节拍机，一个做鼓点，一个做旋律，同时播放

1. BPM 120 表示什么？

2. 节拍机中一个音轨的数据结构最适合用什么表示？

3. Web Audio API 中的 AudioContext 是什么？

参考示例 ​

完整的节拍机示例：beat-maker.html

下载后用浏览器打开即可使用。