# MIDI 一行接上：鍵盤、螢幕上的控制器、手機都能彈

正式網址：https://newmediaart.course.monolab.world/snippets/midi-one-line

在草圖最上面貼一行 Open Audio Visual，就能用 MIDI 鍵盤（MiniLab 3、LPD8）演奏作品：knob1～knob8 像 mouseX 一樣直接讀，notePressed() 像 keyPressed() 一樣按了就叫。沒有鍵盤就按畫面角落的 🎹 用螢幕上的控制器，或 📱 用手機。草圖裡有 OPC.slider（像 3-0 粒子模板）的話，旋鈕會照順序自動接上那些拉桿。

- **分類**：鍵盤滑鼠
- **行數**：23 行（p5.js 1.x／2.x）
- **在哪一堂用到**：[第 4 堂](https://newmediaart.course.monolab.world/lesson/04)

把第一行貼在自己草圖的最上面，之後 knob1～knob8、fader1～fader4、pad1～pad8、notePressed(note, velocity)、noteIsDown(60) 都能用。草圖裡已經有 OPC.slider 的話（像 3-0 粒子模板），旋鈕 1 會接第一根拉桿、旋鈕 2 接第二根，不用改程式。

```js
// 第一行：Open Audio Visual 一行接上 MIDI。說明：https://openaudiovisual.com/zh/docs/#p5
// 接上 MIDI 鍵盤（Chrome 會問一次要不要允許），或按畫面角落的 🎹 用螢幕上的控制器、📱 用手機
document.head.prepend(Object.assign(document.createElement('script'), { src: 'https://openaudiovisual.com/p5/oav-p5.js' }));

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(20);
  noStroke();
}

function draw() {
  // 旋鈕 1、2 跟 mouseX 一樣直接讀，數值 0 到 1
  background(20, 10 + knob1 * 60);
  fill(255, 60);
  circle(width / 2, height / 2, 40 + knob2 * 400);
}

// 跟 keyPressed() 一樣：按下任何一個鍵（或打擊墊）就會叫它
// note 是哪個鍵（MIDI 編號，中央 C＝60），velocity 是多用力（0 到 1）
function notePressed(note, velocity) {
  fill(random(255), random(255), 255);
  circle(map(note, 36, 84, 0, width, true), random(height), 20 + velocity * 160);
}
```

## 同類常用指令・鍵盤滑鼠

- [按 R 換一組隨機](https://newmediaart.course.monolab.world/snippets/reset-random)
- [按空白鍵暫停／繼續](https://newmediaart.course.monolab.world/snippets/pause-space)
- [按 C 清空畫布（筆刷作品）](https://newmediaart.course.monolab.world/snippets/clear-canvas)
- [取座標小工具：點一下印出 vertex](https://newmediaart.course.monolab.world/snippets/vertex-picker)

[回到全部常用指令](https://newmediaart.course.monolab.world/snippets)

[到 Hahow 報名](https://hahow.in/cr/creative-code)。價格與優惠以 Hahow 頁面為準。