数组值如何变成声波？Visual Sorting的Web Audio声音引擎实现深度剖析

数组值如何变成声波Visual Sorting的Web Audio声音引擎实现深度剖析【免费下载链接】visual-sorting Visual Sorting (aka The Sound Of Sorting) is a tool that provides a visualization of sorting algorithms, accompanied by an auditory experience.项目地址: https://gitcode.com/gh_mirrors/vi/visual-sortingVisual Sorting又名 The Sound Of Sorting是一款排序算法可视化工具它把数组中的每个值画成一根柱子并让算法碰到的柱子发出对应音高——值越大声音越尖。整副声音魔法其实只用了不到 50 行基于 Web Audio API 的代码本文带你拆解这套声音引擎的完整实现原理。一、为什么排序可以听起来传统教学里我们靠眼睛观察柱子的移动来理解排序过程。而 Visual Sorting 借鉴了经典视频The Sound of Sorting的创意把数组值映射到音频频率让耳朵参与观察。这样做的直观好处是 听到连续低音符说明算法在处理小区间 听到刮玻璃式的高频滑音说明它在跨大步长扫描 排序快结束时音符逐渐单调上扬——你听到了数组变有序。整个功能由一条清晰的数据流驱动下面逐层拆解。二、声音引擎本体只有 50 行的 sound.ts核心实现全部集中在 sound.ts 中对外只暴露 3 个函数函数职责关键代码位置soundStart(size, name)启动振荡器计算频率步长sound.ts#L17-L30soundStop()停止并断开振荡器sound.ts#L32-L43playValue(value)把数组值换算成频率并即时发声sound.ts#L45-L50引擎设计上有两个要点全局单例AudioContext。浏览器限制同一页面并发 AudioContext 数量且排序全程只需要一条音频流因此 sound.ts#L9 在模块加载时就用new AudioContext()创建唯一上下文并仅在浏览器环境创建SSR 渲染时自动跳过。一个持续运转的振荡器而不是每个值建一个新振荡器。如果每次访问数组元素都新建振荡器会产生大量杂音和性能开销这里采用长鸣 改频率策略——振荡器一直响每次只改写它的frequency参数。三、值到频率一条线性映射公式数组值如何变成声波的答案就藏在两个常量与一行公式里。1. 划定可听频段sound.ts#L14-L15minFrequency 10 Hz最低音下限maxFrequency 1500 Hz最高音上限选择 1500 Hz 而不是更高是为了把音调控制在人耳对频率差异分辨力最好的中低频段避免尖锐刺耳。2. 启动时计算步长sound.ts#L25freqStepSize maxFrequency / size以默认 300 根柱子为例步长约为 5 Hz——每增大 1 个数组值音高上升约 5 Hz。3. 发声时的映射sound.ts#L49frequency freqStepSize × (value − 1) minFrequency这就是一条从[1, size]到[10 Hz, 1500 Hz]的线性映射数组里的最小值 1 发出 10 Hz 的低沉嗡鸣最大值size发出接近 1500 Hz 的高音。柱子越高音调越高视觉与听觉在此刻完全对齐。四、算法如何告诉引擎该发什么音如果引擎只负责发音那么什么时候发、发什么音由谁决定答案是排序算法本身。每个算法如 bubble-sort.ts都是一个 JavaScript 生成器函数每一步yield一个 ProgressIndicator 结构access本步骤访问了哪些下标用于界面高亮sound哪根柱子应该发声关键comparisons / swaps / accesses统计增量顶部实时指标。以冒泡排序为例每次比较arr[j]与arr[j1]时都会yield出sound: j 1bubble-sort.ts#L17-L23意思是把j1位置柱子的值念出来。SortPanel.svelte 的tick()方法每走一步就检查这个字段若存在且当前有音色启用便调用playValue(workingArray[next.value.sound])SortPanel.svelte#L55-L61。这一层解耦非常漂亮算法只声明语义我碰了哪个位置引擎负责物理换算频率、驱动扬声器。想给新算法加声音只需在 yield 里带上sound字段一行都不用改音频代码。五、24 种音色web-audio-oscillators 与界面控制值→频率解决的是音调而音色正弦、方波、锯齿……则由开源库web-audio-oscillators提供见 package.json。界面右上角的音色下拉菜单HeaderSoundControl.svelte直接遍历库导出的customOscillatorTypes共24 种振荡器可选无需手写任何波形代码选择结果通过savePref持久化到本地存储刷新页面后依然保留默认为triangle三角波按键盘M可一键静音——静音的实现其实就是把oscillatorType置为null引擎会自动停止振荡器。还有一个细节在对比模式两个算法同屏赛跑下只有 A 面板发声。因为全站共享唯一的 AudioContext两个振荡器同时写入会互相打架产生和声干扰参见 page.svelte#L218-L222 中的注释说明。六、几个值得一提的工程细节双停止保护Web Audio 对已停止的振荡器再次调用stop()会抛InvalidStateErrorsoundStop()用try/catch兜底sound.ts#L36-L40保证 Start/Stop 快速连点也不会报错。启动即清理soundStart内部先执行soundStop()sound.ts#L26避免新旧振荡器叠加。单步模式延时关闭点击 Step 单步执行时声音会在 100 ms 后自动停止page.svelte#L248-L252让每一声短促清脆便于逐步分析。响应式开关主页面用 Svelte 响应式语句$running oscillatorType ? soundStart(...) : soundStop()page.svelte#L208-L210排序状态一变音频自动跟着启停。七、动手体验如果想亲自调试这套声音引擎克隆仓库后本地启动即可git clone https://gitcode.com/gh_mirrors/vi/visual-sorting cd visual-sorting npm install npm run dev打开页面后建议试试选Bubble SortNone/Triangle音色对比、把 Array size 调小如 30放慢速度你能清晰地听出每次比较落在哪根柱子上——这正是这套 50 行 Web Audio 声音引擎想要传达的把抽象的数组操作翻译成耳朵也能读懂的信号。【免费下载链接】visual-sorting Visual Sorting (aka The Sound Of Sorting) is a tool that provides a visualization of sorting algorithms, accompanied by an auditory experience.项目地址: https://gitcode.com/gh_mirrors/vi/visual-sorting创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考