AI 摘要
📝 213 字⏱ 2 分钟阅读
🎋 竹知了 —— 一转就”哇哇”叫的童年玩具,现在网页上就能玩
还记得小时候路边摊几块钱一个的竹知了吗?
一根竹筒,蒙上竹膜,拴一根涂了松香的线。攥住竹签甩起来画圈,”哇——哇——”的声音就跟着转速越叫越响。被大人没收过,被同学抢着玩过,后来不知道丢哪去了。
现在它回来了,一个 HTML 文件就能玩。
怎么玩?
手机电脑直接打开网页,无需下载,无需安装。
- 按住屏幕画圈,像甩真玩具一样,转得越快叫得越响
- 懒得动手?点一下它自动甩
- 手机端还能握着甩——重力感应直接驱动,体感还原
为什么能做到这么像?
这个项目不是简单的音效合成,而是用了真实竹知了的录音采样,从实拍视频里截取声波周期做无缝循环。甩动速度实时改变回放速率,甩得急叫得急,甩得慢叫得慢。
物理层面也做了还原——竹筒是绳系质点模拟,重力、弹性绳、空气阻力一个不少,1/240秒定步长积分。角速度决定发声,绳松了就不响,松手后惯性余音渐歇。
技术上有点狠
整个项目就一个 index.html 文件,零依赖、零构建。Canvas 2D 渲染画面,Web Audio API 处理声音,连录音采样都直接内嵌在 HTML 里。
存下来断网也能玩,二十年后双击照样出声。
页面底部还有个实时计数——全球有多少人在跟你一起甩,每一声”哇”都算数。后端用 Cloudflare Worker + Durable Object 实现,WebSocket 实时推送,挂机休眠零费用。

评论(0)