🎹

MIDI 钢琴

落键练习 · 把音符按在正确的那一刻

开始游戏

▶

落键练习

音符落下 → 准点按琴键 → 长音按住不放

打开游戏 →

怎么玩

三步上手

  1. 1点击「打开游戏」,进入琴键画面。
  2. 2按「开始」,音符从上往下落。
  3. 3音符碰到底部黄线时,按下对应琴键。

每个长条中间默认写着「音名-唱名」:C♯⁴-♯1、E♭³-1、G⁵-3——横线前是音名(上标数字是八度),横线后是简谱唱名,照着按就不会认错音。想练指法时,按「键名(n)」把它切成「指法」,长条上就只剩下 左-1 / 右-2(哪只手、第几指)——音名与唱名整段撤掉,一行指法看得更清楚;两种写法随时一键来回切。

音名-唱名 / 指法(「键名(n)」切换)

长条中间默认写的是「音名-唱名」,如 G♯⁵-3:横线前是音名(变音记号跟在字母后、八度用上标),横线后是简谱唱名——1=do、2=re、3=mi、4=fa、5=sol、6=la、7=si,数字表示这个音在本曲调性里是第几级。按一下控件栏里的「键名(n)」(快捷键 N),长条上就只剩指法:左-1 / 右-2——手别 + 第几指(1=拇指 … 5=小指),和「指色」用的是同一套建议指法;这时音名与唱名整段撤掉、不再写在前面,长条上只有指法一行字;再按一下切回「音名-唱名」。「右-2」比「-3」宽,但省掉音名之后反而画得更大、更清楚。这个按钮在菜单层里,按 M 收起菜单时会跟着一起隐藏。

  • 调性由程序自动判断(各音级的累计时长与大小调音级轮廓做相关,再加结尾三个音的主音先验),结果显示在页面右上角,例如「示例:二十四节气歌 · 1 = E♭ 大调」。
  • 判断把握不大时状态栏会提示;也可以用顶部「调性」下拉手动指定(12 大调 + 12 小调都在里面),唱名数字立刻重画。
  • 调外音按惯用写法带变音记号:大调 ♯1 ♭3 ♯4 ♭6 ♭7,小调 ♯1 ♯3 ♯4 ♯6 ♯7。
  • 高低八度不再加简谱的点——音名后面那个上标数字已经写明八度,同一级音跨八度读同一个数字。
  • 窄条放不下时自动缩排成两行(音名一行、唱名/指法一行),再窄就省略,不会溢出到相邻长条上。

建议指法(写字或上色)

指法有两种呈现方式,都在控件栏里,各按各的、互不冲突:写字——按「键名(n)」把长条从「音名-唱名」切成「指法」,长条中间就只剩 左-1 / 右-2(手别 + 第几指,1=拇指 … 5=小指;音名与唱名撤掉,让位给指法);上色——按 C 或点「指色(c)」,长条与它正压着的琴键按建议指法上色,1 红、2 橙、3 黄、4 绿、5 蓝。控件栏里常驻一张左右手色卡:按人坐在琴键前的方位排——左边是左手(5→1,小指在最左、拇指靠近中间)、右边是右手(1→5,拇指靠近中间、小指在最右),两只手的大拇指在中间挨着,色块上方的数字就是第几指;指色没开时色卡是暗的,按 C 就亮起来。

对齐粗线:每个正在下落的音符还会沿它该按的那根琴键的中线拖出一条半透明粗线,一路连到「落点 / 按键时刻」那条黄线上——线的颜色就是该手指的色块色(指色关闭、或这个音没算过指法时,用长条本来的蓝/紫),透明度取色块的 50%。长条压在线上面,所以看上去像「音符拖着一条线直奔琴键」:音再多、键再窄,顺着线也能一眼看出它落在哪根键上。它只是视觉引导,不参与判定。

  • 方案1 最省力:总代价最低,手的移动与手指伸张折中。
  • 方案2 保手位:尽量不挪手,音程靠手指伸张解决。
  • 方案3 多换把:宁可多挪手,也少做手指伸张。
  • 方案4 音阶型:多用拇指穿指跑动,适合音阶式旋律。

四组方案由同一个动态规划求出,只是权重取舍不同,彼此有 30% 左右的音不一样。选「不显示」就不算指法——此时既没有颜色可用,长条上也仍写音名-唱名(不会空着)。注意:默认写法里「-」后面的数字是唱名,不是手指;只有切成「键名:指法」后,那里的「左-1 / 右-2」才是手指。

计分规则

  • 正中落点 完美 +20,稍偏 正确 +10。
  • 长音按满并有完成奖励 +10。
  • 漏掉音符 −2,按错琴键 −5,长音松太早 −3。
  • 倒放或往回拖动进度条会把经过的音符复原,可以重弹;它们此前计入的分数会一起回退。

可调设置

  • 菜单(页面最上面那一行正中的标签,快捷键 M):点一下,标题、控件栏、统计、MIDI 栏与状态行会一起向上收起,省下的高度全部让给音符下降轨道——画面更高、看得更远,适合沉浸式练习;再点一下原样放下。这一行里的「菜单(m) / 开始(p) / 重来(r) / 全屏(f)」四个按钮与屏幕最下方的进度条不参与收起,菜单开合都留在原处,随时能播放、暂停、重来、切全屏或拖动定位。收起后按钮右侧会露出一行极简仪表盘(时间 / 得分 / 连击),各项控制仍可用快捷键操作。
  • MIDI 授权(MIDI 栏里带方框的按钮):方框打勾=本站已经允许使用 MIDI 设备,空框=还没允许。在 Chrome / Edge 里点它才会弹出系统的权限询问框,选「允许」后电子琴按键就直接送进游戏,方框随即打勾并一直保留;已授权后再点一下等于重新扫描一次键盘。页面载入时只在后台读一下权限状态、不主动弹框(避免误点「拒绝」后被浏览器记住);浏览器不支持 Web MIDI(iPad、Safari)时点它不弹框,而是直接说明原因和替代办法。
  • 导入 MIDI:选择本机的 .mid 文件练习。
  • 速度:65% / 85% / 100% / 120% 预设,或用旁边的滑动条在 5%–200% 之间连续调速。
  • 正放 / 倒放:默认正放;弹错时切成倒放,让时间退回去再顺过来重弹。
  • 音量:按钮或 W / S 键调节,范围 0%–100%。
  • 背景音:默认 0%(关闭)。调到大于 0 后,长条落到琴键的瞬间会按这个音量自动把该音弹响,音有多长就响多久,一直响到长条完全走过落点线才收声;长条与琴键一起发出同亮度的荧光(设 50% 就是半亮),像示范一样带着你弹;你亲手按下时立刻变成 100% 满亮 + 满音量。按 B 可在 0 / 25 / 50 / 75 / 100% 之间循环。
  • 范围:自动匹配曲子音域,或固定 C3–C5、C4–C6。
  • 宽键:默认关闭。点「宽键(k)」或按 K 后,程序会搜索本曲的最低音与最高音,最低音再往下留一个音程、最高音再往上留一个音程;若边界正好压在黑键上,则再向外让半个音程,让两端尽量停在白键上。音区收紧后键数变少、每个键变宽,在平板/手机上手指点按更从容。再按一次 K 恢复原样;开启期间「范围」下拉暂时失效。
  • 调性:简谱唱名的基准,默认「自动」——按音级累计时长与大小调轮廓判断本曲的调,结果显示在右上角;判定不准或想按另一个调唱时手动指定,唱名立刻重画。
  • 指法:切换四组建议指法,或选「不显示」;它同时决定「键名:指法」写的指号与「指色」用的颜色,选「不显示」时两样都不成立,长条仍写音名-唱名。
  • 键名:切换下落的长条中间写什么——「音名-唱名」(默认,如 G♯⁵-3)↔「指法」(左-1 / 右-2:手别 + 第几指,1=拇指 … 5=小指;音名与唱名整段撤掉,长条上只留指法)。按钮「键名(n)」在控件栏(菜单层)里,按 M 收起菜单时会跟着一起隐藏。要选一组「指法」方案才有指号可写。
  • 指色:默认关闭。点「指色(c)」或按 C 后,落下的长条和它正压着的琴键都按建议指法上色——第 1 指红、第 2 指橙、第 3 指黄、第 4 指绿、第 5 指蓝。控件栏的色卡分左手(5→1,在左)与右手(1→5,在右)两排——按人坐到琴键前的方位排,两只手的大拇指在中间相邻;色块上方的数字即第几指,左右手都从拇指数起,所以同号即同色。弹对/已完成/漏掉的判定反馈色优先级更高,不会盖掉结果。选「不显示」指法时没算过指法,长条保持原来的蓝紫配色;再按一次 C 关闭。
  • 对齐粗线:每个下落的音符都沿它该按的琴键中线拖一条半透明粗线直连落点线,颜色=该手指的色块色、透明度=色块的 50%(指色关闭时用长条本来的蓝/紫)。它只帮你把音符和琴键对齐,不参与判定。
  • 防长按(默认开启,快捷键 T,touch 首字母):iPad / iPhone 上单指按住琴键不放时,系统会把它当成「长按手势」——先冒出放大镜与文字选择,松手前后又弹出「拷贝 / 分享 / 存储图像」菜单,练长音时最容易被它打断。开启后这些系统动作在本页被屏蔽:按住琴键只会持续出声,不会再弹放大镜或分享菜单;两份说明书里的文字仍可正常选中复制。再按一次 T 恢复系统原来的行为。若个别系统版本上仍偶发触发,可在 Safari 里「分享 → 添加到主屏幕」,之后从主屏图标打开——没有地址栏、也不走系统的手势识别,长按最干净,画面也更大。
  • 左上角的照片:屏幕左上角浮动的那张照片,手指按住(触屏就是长按)可以拖到任何位置;松手后位置会被记住,下次打开还停在原处。往外拖过头会被自动收回,始终留至少 8px 在屏幕里,不会拖丢;窗口变小或 iPad 转屏后同样会收回可视区。它固定在视口上、不在菜单折叠层里,所以点「菜单(m)」收起或放下都完全不影响它。长按照片只会是拖动,不会冒出「存储图像 / 拷贝」那套菜单。
  • 全屏:画面宽度铺满浏览器窗口、高度吃满剩余空间,按 F 或点顶部那一行最右边的「⛶ 全屏(f)」(与「菜单(m)」「开始(p)」「重来(r)」并排,菜单收起时也留在原处)可进一步放大到整块屏幕(课堂投屏用)。
  • 使用说明:游戏页的长篇说明收进了「ℹ 说明(a)」面板,默认不占地方,按 A 或点按钮会居中弹出来。
  • 背景资料:控件栏里的「背景资料」是个链接(不是开关),点它会新开一页打开 《一竿日影 · 从圭表认识二十四节气》——内置示例曲《首都花园城市二十四节气歌》里唱的二十四节气是怎么定出来的:拖太阳黄经看一年里正午影长的变化、转一下地球公转与太阳直射点的三维视图、再看一天里太阳走过的那条弧,另有一段辨析「表」与「华表」两个容易混的名字。它只供背景阅读,不参与练习与计分,关掉那一页就回到游戏;按钮和其它控件一样在菜单层里,按 M 收起菜单时会跟着一起隐藏。

键盘快捷键

  • P 开始 / 暂停 R 重来
  • O 正放 / 倒放切换
  • ← → 连续调速,每次 1%
  • ↑ ↓ 分档调速,每次 5%
  • W / S 音量增减,每次 10%
  • B 背景示范音:0% → 25% → 50% → 75% → 100% 循环(0% 即关闭)
  • K 宽键:音区收紧到本曲音域,琴键变宽(平板更好点按)
  • C 指色:长条与琴键按建议指法上色,控件栏的色卡随之亮起(左边左手 5→1、右边右手 1→5,色块上的数字即第几指),再按一次关闭
  • N 键名:切换长条中间写什么——「音名-唱名」(如 G♯⁵-3)↔「指法」(只写 左-1 / 右-2:手别 + 第几指;音名与唱名撤掉),再按一次切回
  • M 菜单:收起 / 放下顶部的标题、控件与文字说明,收起后音符下降轨道更长(沉浸式练习)。顶部那一行(菜单 / 开始 / 重来 / 全屏)和最下方的进度条始终留在原处
  • T 防长按:屏蔽 iPad / iPhone 对「长按琴键」的系统动作(放大镜、文字选择、分享/拷贝菜单),再按一次恢复
  • F 全屏 / 退出全屏(画面放大到整块屏幕)
  • A 显示 / 隐藏「使用说明」面板(居中弹出)
  • D 显示 / 隐藏这份「快捷键」说明(页面右上角也有「⌨ 快捷键(d)」按钮)
  • Esc 关闭上面两个面板

页面上的按钮把快捷键写在了文字后面,例如「菜单(m)」「开始(p)」「重来(r)」「正放(o)」「全屏(f)」「说明(a)」——不用记,看一眼就知道。唯独控件栏里的「背景资料」没有快捷键:它不是开关,而是一个链接,点它会新开一页(想留着游戏就让它开着,切回原标签页即可)。

设备要求

  • 平板:横屏使用,触屏演奏,支持多指同时按。按住长音时若被系统的放大镜或分享菜单打扰,确认「防长按(t)」是开着的(默认开)——它会把这些系统动作挡在页面外。
  • 电脑:鼠标点击琴键即可。
  • MIDI 键盘:USB 接电脑,用 Chrome / Edge 打开,点 MIDI 栏里的「MIDI 授权」允许一次即可直接弹奏——按钮上的方框打勾=已允许,空框=还没允许。
  • 需开启音量;声音由浏览器实时合成。

课堂建议

第一次练习:用内置示例曲目,速度 65%,范围选「自动」,先熟悉手感。
进阶练习:导入课本曲目,逐段提速(65% → 85% → 100%),记录最高得分与最大连击。
键盘音域不够高:如果你的键盘最高只到 E5,而曲子有更高的音(页面会显示本曲音域),把页面上的「键盘八度」设为 +1——此时你按 G4 就等于弹 G5,整首曲子会下移一个八度落在你的键盘上。这个平移只影响 MIDI 键盘输入,触屏弹奏不受影响。
弹错了怎么纠正:不要从头再来。按 O 切成「倒放」,时间会往回走,音符向上退回去——退过的那几个音会自动复原成「未弹」;退到错处之前再按一次 O 回到正放,就能接着把那一段重弹一遍。比整曲重来省时间,孩子也更容易看出自己错在哪一拍。
用进度条对位:画面最下方是播放条,左边是起始时间、右边是结束时间、中间的数字是当前时间。想专门练某一段,直接用鼠标点或拖进度条跳过去;往回拖会把经过的音符复原成可以重弹的状态。
慢练:用 ← → 每次 1% 微调速度,或用 ↑ ↓ 每次 5% 换档,比在下拉框里挑更快。速度变化是实时的,乐曲进度不会跳。
带学生入门(背景音):把「背景音(b)」调到 25%–50%:长条落到琴键时会自动按这个音量把该音弹一遍,延音长短跟着音符长短走(长音一直延着、短音短短一响,慢速练习时按比例自动拉长;学生没跟弹、音符被判了「漏掉」也不影响它,示范音照旧响到长条走完,不会响一半就断),同时长条与该琴键亮起同样亮度的荧光——学生照着亮的位置按键;自己弹下去的一瞬间,光和声音都变成 100%,弹没弹对一目了然。这个滑块只管"示范提示",不替学生过关(不计分、不改判定)。练熟后拉回 0% 即完全关闭,回到纯练习模式。
接 MIDI 键盘:用 USB 连到电脑,在 Chrome / Edge 中打开本页,点 MIDI 栏里的「MIDI 授权」按钮——浏览器会弹出系统的权限询问框,选「允许」后按键盘就能弹(页面顶部会显示已连接的设备名),按钮上的方框也随之打勾并一直保留,一眼就能看出「这台电脑已经允许过了」。没允许时方框是空的;页面载入时只会在后台读一下权限状态、不会主动弹框,免得还没看清就误点「拒绝」,所以第一次用键盘时请自己点一下这个按钮。浏览器不支持 Web MIDI(iPad、Safari 等)时点它不会弹框,而是直接说明原因和替代办法。若 MIDI-OX 正在运行请先关闭——Windows 上 MIDI 端口会被独占,MIDI-OX 占着时浏览器收不到音符。
换一台电脑后提示「权限被拒绝」:这是那台电脑之前拒绝过本站的 MIDI 权限,浏览器把它记住了,所以不会再弹询问框,地址栏上也常常不显示 MIDI 图标——这就是你找不到图标的原因(按钮上的方框这时也是空的)。修复办法:点地址栏最左端的 🔒 锁(或 ⚙ 调节滑块)图标 →「网站设置」→ 找到「MIDI 设备」→ 改成允许 → 刷新本页。若那里没有 MIDI 这一项,就在地址栏输入 chrome://settings/content/midiDevices(可直接复制),把本站从「不允许」列表里删掉,或把顶部默认项改成「网站可以请求使用 MIDI 设备」。改完必须刷新页面才生效;如果键盘是在拒绝之后才插上的,重启一次浏览器最保险。
用唱名带入门(简谱):长条上的「音名-唱名」把音高与级数摆在一起,正好用来对简谱:先看右上角的调性(如「1 = E♭ 大调」),再让孩子把落下的数字唱出来(1=do、2=re…),落到线时按对应的琴键——数字读得出来,键就找得到。示例曲只用到 1 2 3 5 6 五个音(大调五声音阶),很适合第一次认简谱。琴键上的音名也放大了一档(与顶部按钮的字号协调:白键 14–15px、黑键 11–13px),键变窄时会自动退一号,不会和隔壁琴键压字。要练指法时按 N 把长条切成「指法」,那里就直接写「左-1 / 右-2」(手别 + 第几指)了。
用指法带入门(写字或颜色):指法有两种呈现方式,按需选一种——写字:按 N(或点控件栏的「键名(n)」)把长条切成「指法」,长条中间就只剩 左-1 / 右-2(手别 + 第几指;音名与唱名让位,不再重复);上色:按 C 开「指色」,颜色就是手指:1 红 2 橙 3 黄 4 绿 5 蓝(控件栏色卡左边是左手 5→1、右边是右手 1→5,两手大拇指在中间相邻,色块上的数字即第几指)。每个下落的音符还会拖一条同色的半透明粗线直连落点线,孩子顺着线就知道该按哪根键、用哪根手指。指法由一阶动态规划自动算出(代价=手位移动+弱指/黑键/穿指等规则)。同一个乐句常常有几百种「并列最优」的指法,所以它只是参考:先按方案 1 走一遍,孩子手形别扭时就从「指法」里换一组(「保手位」适合手大,「多换把」适合手小),或选「不显示」自己定。不要拿指号判对错——指法本身没有唯一答案。
先讲一句背景(节气):示例曲唱的是二十四节气。想让学生知道节气不是背下来的名词,点控件栏里的「背景资料」新开一页 《一竿日影 · 从圭表认识二十四节气》:拖太阳黄经看一年里正午影长怎么变、转地球公转看太阳直射点怎么挪,一眼能看出「影长最短在夏至、最长在冬至」——回到游戏再把旋律唱成 1 2 3 5 6,音高与节律、天文就串起来了。这一页只是背景阅读,不影响练习与计分。
沉浸式练习:练到不用看说明的时候,点屏幕正上方的「菜单」标签(或按 M),把标题、控件栏和统计一起收上去——省下的高度全部给音符下降轨道,画面能高出 300 多像素,长条落得更从容、看得更远;「菜单(m)」「开始(p)」「重来(r)」「全屏(f)」四个按钮和屏幕最下方的进度条不受影响,一直留在原处,随时能暂停、重来、切全屏或拖到某一段;菜单按钮右边还会留一行小字显示时间、得分和连击,手上不用离开琴键。
琴键加高了一倍:屏幕上的琴键高度是原来的 2 倍(上限 300px),平板、手机上更好点按,也更容易看清长条压在哪个键上。窗口特别矮时(例如 1024×640 且菜单是展开的)会自动收回一部分高度,保证落点线以上还留有足够的下降轨道,不会因为琴键太高而看不见长条。
投屏上课:画面宽度自动铺满窗口,按 F 全屏后长条与琴键会跟着一起放大到整块屏幕,教室后排也看得清;全屏时页面会自动收起下方的长篇说明。
注意:iPad / Safari 不支持 MIDI 输入(WebKit 至今没有实现 Web MIDI),平板端只能用触屏弹奏。
注意:导入的 MIDI 文件只在本机浏览器中读取,不会上传到服务器。