娃学琴,节奏感糊成一坨了。老师让抖腿打节拍,显然不work。码农特有的穷B气质让我舍不得买个实体的;去找个节拍器app,结果各大市场都是各种广告,怕给娃用不正经;甚至找了很多公众号版的,小程序版的,网页版的,普遍都是各种跳转诱导点击。

失望之余,想起来上次JS播放DTMF对 WebAudio 有点感觉,要不这次自己干脆再手搓一个。调研了一圈发现这玩意没那么容易,主要就是javascript在浏览器里 setInterval 是有时间抖动(jitter)的,不能保证节奏精确。如何才能做到精准采样打节拍呢?连续精心编排 AudioContext 时间轴!

搜了一圈发现一位叫 Grant James 已经写好放在 github 了。那还等什么直接拿来~~针对性的改进了:

  1. 无广告
  2. 去掉 .js .css 依赖,单文件更快
  3. 精简不必要的代码结构,方便以后魔改

改完之后发现两三个坑也跟着一起修补了:

  1. wakeLock 防止手机上使用息屏
  2. 突破固定的4拍子,加上可以增减的节拍控制
  3. 增减按钮禁止调到小于 0

最后成果就放在 https://lab.est.im/metronome/ 这里了。有需要的拿去用。协议 CC BY-NC 4.0

20240929更新:

  1. 支持了长按按钮一直增加减少bpm
  2. 禁止长按出现菜单
  3. 禁止双击缩放