html + css + jQuery 实现钢琴布局的音名练习工具

展示：

源码：https://github.com/liu-shichao/musical-alphabet
演示地址：https://liu-shichao.github.io/musical-alphabet/

使用方法：

1. 目前只试过在 win11 谷歌浏览器 下运行。

2. 使用方法：随便选一个按键，回忆是什么音名，然后单击那个按键，显示音名进行对照，再次单击可以重新隐藏音名。

3. 快捷键 d 可以 （显示 / 隐藏） 全部音名。

背景:

乐理学习里有个步骤是练习音名，一般是对着一张琴纸或者钢琴去练习，这样练习比较麻烦，因此做了这个小工具来辅助练习。

代码解释：

1. 使用 html 中的 <div> 元素作为钢琴块；
2. 白键使用 css 中的 float 样式，从左向右依次排列，这里指定父元素的高度，来清除后续元素的浮动，同时父元素设置为相对定位，配合黑键的绝对定位（子绝父相）；
3. 黑键采用绝对定位，计算每个黑键的偏移量，覆盖在白键上方，需要注意绝对定位需要自己指定宽度，不然默认会为0；
4. 每个键的内部又嵌套了两个<div>元素，用来显示建上的音名；
5. 使用 jQuery 为每个建绑定点击事件，只需要为键盘类绑定事件就行，在响应函数中设置音名的显示与隐藏；
6. 绑定电脑键盘 d 键的按下事件，当按下时切换全部音名的显示或隐藏的状态；
7. 音名中降号符号输入法一直没能打出来，是从网上找了一个直接复制粘贴过去的。

备注：

1. 这里写的代码本着能跑就行的原则编写的，大佬们可以自行拿去修改优化。

参考：

1. 前端开发学习路线：https://developer.aliyun.com/learning/roadmap/frontend
2. https://gitcode.com/mirrors/inanyworld/javascript-piano/tree/main