
说实话,第一次拿到这个需求的时候,我们自己也愣了一下——把小时候玩的那种竹片绳子甩起来哇哇叫的玩具,做到浏览器里?能还原几分?结果做完之后自己玩了一下午,还真有点上头。这玩意儿在民间叫法挺多,竹蝉、拉线蝉、知了哇呜,不同地方喊法不一样,但玩法都一样:两片竹片中间穿根绳,抓住绳头甩起来,离心力把竹片甩开,绳子绷紧的瞬间发出类似蝉鸣的“哇——哇——”声,甩得越快叫得越急。我们把这套物理过程完全搬到网页上,不是做个动画糊弄,是真的用绳系质点模型算角速度、离心力、绳张力,再联动声音引擎实时变速回放。
三种玩法,对应不同场景:
手动拖拽——手指按住屏幕画圈,竹筒跟着绕圈转,转得快声音就大,转得慢或者停下来,声音也跟着弱下去直到消失。松手之后靠惯性还会再响一小段,那个余音渐歇的感觉挺真实。
自动甩——懒得动手或者想当个背景音放那儿,点一下按钮,它会自己匀速旋转,速度可调,适合放在店里或者展会上做气氛。
甩手机(体感)——这个只在手机上生效,握住手机像真的甩竹蝉那样画圈,陀螺仪会检测你的甩动幅度和频率,直接驱动甩杆。比点屏幕更有手感,尤其是给小孩子玩,他们拿着手机乱甩也能响,挺好笑的。
声音这块做了两层保障:
主音源是从实拍视频里截的一段真实竹蝉录音,大概1.72秒,刚好是4个完整的“哇”周期,AAC格式直接嵌在HTML里,单文件不依赖外部资源。回放的时候根据实时角速度拉快或拉慢,转得快就放得快,音调升高,转得慢就放得慢,音调压低。如果音频解码失败(比如某些老旧浏览器),会自动切换到Web Audio合成引擎,用锯齿波加调幅噪声加带通滤波拼出一个类似的声音兜底,不会让用户没声可听。
后台管理:
访问 /admin/ 目录,第一次进去会让你创建一个管理员账号,设个密码就行,不用改代码。登录之后可以配这些东西:
右上角那个按钮显示什么文字
弹窗的标题和描述
弹窗内容三种样式选一种(纯文字、图片、二维码带名称)
二维码图片上传和对应的名称
左下角的站点链接文字和URL
这些配置都存SQLite里,不用单独装数据库,PHP 7.4以上就能跑。
部署步骤很简单:
把 /user/ 目录里所有文件上传到服务器任意目录,根目录或者子目录都行。然后访问 /api.php?action=ping 看一眼,返回 {"ok":true,...} 就说明PHP环境没问题。接着访问 /admin/ 创建管理员,登录后台配好弹窗和二维码,最后访问首页就可以正常玩了。
整个过程不需要命令行,不用配数据库,上传完就能用。如果想拿它做商业运营,比如在景区、文创店、亲子乐园放个二维码让游客扫码玩,后台的弹窗系统可以挂自己的广告或者导流入口,三种样式足够覆盖大部分场景。


