ARTICLE · 1283556
声音还能这样玩?4个滑块,把初中物理声现象变成一间实验室
PHYSICS · 初中物理声现象
四个滑块,一块画布
把声学拆成实验课
声学实验舱 · 老狗出品
声音不是背出来的,是调出来的
频率、振幅、波形——三个词,四个能拖的滑块
物理是初二才开的课,可孩子问的那些问题,从幼儿园就开始了。往保温杯里灌开水,声音会一路往上爬;拿筷子敲碗,水多的那只听着总闷一点。这些问题我小时候也问过,得到的答案是「快点倒,别烫着」。
答案其实一直在那儿,只是没有一样东西能让他自己拖着试。所以这次我把整章「声现象」做成了一个能在浏览器里跑的实验台:三个模块、四道真题、一个 76KB 的 HTML 文件,双击就开,断网也能跑。文末有源文件。
01
PART
工具亮相:一间搬进浏览器的声学舱
TOOL REVEAL · 先看它长什么样
它是一份单文件 HTML,76KB。打开就是全屏的实验台:没有一张图片,没有一个音频文件,没有 CDN,所有画面是代码画的,所有声音是浏览器现算的。整个界面是暗色仪表盘的路子,左边一大块画布,右边一列参数面板,顶上三个模块标签页,像台老示波器被搬进了浏览器。
模块一 · 示波器与三特性对比
频率、振幅、音色各一个滑块,配一块双通道示波器。能把任意一条波形「锁定」成虚线参考波,跟当前波形同屏叠着比。
模块二 · 三大必考实验
钢尺伸出桌面、音叉弹乒乓球、八个水杯敲与吹。教材上要摆一桌器材的三个实验,在这里全是点击。
模块三 · 真空罩与介质声速
抽气机连着玻璃罩,气压能从 100% 一路抽到 0;另一条支线是钢铁、水、空气的传声赛跑。
随堂 · 四道中考真题
选完立刻判对错,下面跟一段解析,题目可以换。四道题分别卡在波形读图、暖水瓶灌水、钢尺次声波、闻声识人。
这东西有三种看法。第一种是投影给全班看:顶部有一排「课堂一键对比演示」的档位,点一下参数就摆好,不用在讲台上手忙脚乱地拖滑块。第二种是学生自己玩,右侧面板每一屏都写着这一步在探究什么、结论是什么。第三种是家长陪看,随便点,点错也没关系——错误的波形就摆在那儿,比讲一句「你错了」有用。




02
PART
玩法拆解:从拖滑块到做对题
HOW IT WORKS · 六步走完一章
整条链路很短:拖滑块、看波形、听声音、换实验、做对题。听起来都是些小事,但每一条都对应一个考点的卡口,下面一步一步拆。
先把两条波形摆在一起
模块一顶部有四个一键档位:同振幅不同频率、同频率不同振幅、同音调同响度只换乐器、乐音对噪声。每切一次,上一条波形会留成虚线停在原位,实线是现在的。学生要做的只有一件事——说清楚这两条线差在哪。疏密不同是音调,高低不同是响度,疏密和高低都一样、只有拐角变了,那是音色。
钢尺:把「听不见」演出来
伸出桌面的长度能从 6 厘米拖到 28 厘米。越短,振动越快,屏幕上的残影越密,音调越高。拖过 24 厘米,右上角监测窗立刻变红,跳出四个字:次声波盲区——频率掉到 20Hz 以下,你还看得见钢尺在抖,却听不见任何声音。这道题年年考,讲十遍不如让他自己拖一次。
音叉与乒乓球:把小振动放大
重敲音叉,乒乓球被弹开的幅度明显变大,屏幕上实时显示弹开的角度。但右上角的频率读数始终是 440Hz 不动——力度只改振幅,不改固有频率,响度变了,音调没变。乒乓球在这里不负责表演,它负责把肉眼看不见的微小振动,翻译成看得见的大位移,这叫转换法。
八个水杯:敲和吹,方向正好相反
八只杯子,水位从 1 号到 8 号依次升高。用筷子敲,1 号杯水最少、质量最小、振动最快,音调最高,从左到右一路降低。改成在杯口吹气,发声体换成了水面上方的空气柱:水越多,空气柱越短,振动越快,音调最高的变成了 8 号杯。同一个道具,两个相反的答案,这是整章最容易丢分的地方。
真空罩:铃声跟着气压一起掉
点「启动抽气机抽气」,罩里的空气分子肉眼可见地变少,电铃的小锤从头到尾都在敲,可传出来的铃声一路变小,抽到 0 就剩一片安静。反手打开阀门放气,铃声又慢慢回来。电铃一直在动,声音却没了——这一帧就是「真空不能传声」的全部说服力。实验加推理,因为实验室抽不到绝对真空。
声速赛跑:谁先到
敲一下左端,三条轨道上的声波脉冲同时出发。钢铁一路领先,水在中间,空气落在最后。铁轨听声那道题(长铁管一端敲一下、另一端听到三次响)在这里变成了一场可以重播的赛跑,谁快谁慢不用背。
把模块一那三个滑块反复拖几遍,其实就是在给这张表做实验。表格贴在下面,配合画布一起看更清楚。
03
PART
技术亮点:没有一张图,声音全靠算
UNDER THE HOOD · 三个值得说的点
波形:一个函数管四种乐器
画面上每一条曲线都来自同一个函数,做的事很简单:把若干条正弦波按不同权重加起来。音叉只有基波,是一条干净的正弦;单簧管给奇次谐波加权;小提琴的泛音一路叠到第八次,曲线因此带锯齿感;钢琴的泛音衰减得快,看着就圆滑。铁钉刮玻璃最特殊——四条频率互不成整数倍的正弦叠在一起,永远不重复,所以它看着杂乱、听着刺耳。乐音和噪声在数学上的分界线,就在这里。
发声:浏览器自带一台合成器
声音走的是浏览器内置的 Web Audio。它允许直接给出一组傅里叶系数来定义音色,前面那四张谐波表就是这么来的,所以整个课件里没有一个 mp3,音高和音量全是实时参数。真空罩那段更直白:铃声响度按气压的 1.4 次方衰减,抽气的过程本身就是一条音量曲线。
画面:全部手绘,零素材
画布上没有一个图片文件。钢尺振动是画五帧残影,靠残影的疏密表现振动快慢;真空罩里的空气分子数量直接跟气压挂钩,满压时 95 个,抽到真空一个不剩;音叉的波纹是一圈圈往外走的半圆弧。这套东西全部加起来 76KB,比手机里随便一张截图还小。
零图片、零音频、零外部依赖
说个实在话:声速赛跑那三条轨道的画面速度是缩放过的,按三档大致是 1、0.48、0.22 倍。真要按 5200、1500、340 米每秒的原始比例画,空气那条基本原地不动,看不下去。比例是示意,数值是真的。
///
LAST
写在最后
AFTERWORD · 那个「咦」的一下
做这个东西最费时间的不是画面,是「能不能被问住」。第一次给他玩,他把钢尺拖到 28 厘米,盯着屏幕看了半天,问:它明明在动,为什么没声音?那一刻我不用解释,红线就写在那儿。后来他把八个杯子敲了一遍又吹了一遍,自己发现方向反了,回头跟我说「这个太坑了」。
我越来越觉得,值得留下来的不是结论,是那个「咦」的一下。结论会忘,背着背着就烦了;但自己拖出来过一次的东西,十年后可能还记得。声现象这一章已经做完了,下一章打算做光现象——水里的筷子为什么折了,也是个拖一拖就明白的事。
老规矩,在公众号后台回复 「源文件」 就能拿到这个 HTML 文件。双击打开,不用装任何东西,电脑手机都能跑,断网也能用。
我是老狗,一个程序员爸爸,热衷于把 AI 变成带娃神器,会持续在这里分享自己动手做的小工具和小教程。
既然看到这里了,如果觉得有用,随手点个赞、在看、转发三连吧。
THANKS FOR READING















































































