吉他调音器：Web Components 与音频分析的一趟实战
来源：aerotwist.com — 2026-08-21
📋 概述
作者用 Web Components 构建了一个纯网页吉他调音器：三个自定义元素分别负责音频输入与分析、表盘可视化、调弦指令。文章坦诚记录了调音中最难的部分——音频分析。他先天真地尝试 FFT 找峰值，结果被谐波和性能拖垮（30–60fps 跳动的「CPU 熔炉」），后来改用更稳健的方法。文章还分享了 ES6 类与 Polymer 的结合、Service Worker 版本管理，以及画一个带 45° 动态阴影的表盘的小插曲。
🔑 核心要点
- 用三个 Web Components 分别处理音频分析、表盘与调弦指令。
- 单纯用 FFT 找峰值会被谐波和性能拖垮，这是调音最难的环节。
- 用 Service Worker 实现离线，并通过版本字符串保证缓存更新。
- ES6 类结合 Polymer，需要把构造函数逻辑移到 created/attached 回调。
- 表盘的 45° 动态阴影通过旋转顶点再排序来确定边缘。
💡 金句
我本以为调音这一部分会很简单，结果大错特错——我像个还没学会估算工期的呆瓜。
👍 0
👎 0
← 返回 Lobsters 首页