[FAIL]上周末做着玩的项目的尸体。当时找不到调音器了，于是脑洞大开想着用纯 HTML5 做个圆滚滚的吉他调音器，Audio API FFT 精度不够，于是只剩可视化了。含音量、频谱图、音高检测算法

[akfish]

当时找不到吉他的调音器了，又懒得去找，于是有了这样一个脑洞大开的产物。
Audio API的FFT window size只能到2048，精度不够，虽然可以人肉实现FFT然后用WebGL加速到实时性能解决。
现在调音器找到了，还要继续之前气象雷达的项目，就不继续折腾了（下次找不到时再说）。

给尸体整理了下遗容发出来，要做音频可视化的可以参考下。

可视化部分用的processing.js，FireFox上性能很惨淡，建议用Chrome打开。

• Demo
• Blog
• GitHub

[incompatible]

界面美啊

不过确实是脑洞够大。找不到调音器了用耳朵凑合一下不就行了吗。。

[akfish]

@incompatible 当时要用非标准调弦，Open G神马的不熟。。。

[seki]

看着好赞，其实直接拿来当背景就挺好的 = =

[avrillavigne]

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0
被残忍拒绝了。

[learnshare]

不错，Web Audio 还没高大上到调音的程度，可以尝试用本地的程序结合 H5 的界面来做？

[akfish]

@avrillavigne FF的图形性能一直不如Chrome，然后processing.js的性能也不是各种绘图库里最好的，于是就蛋疼了。

[akfish]

@learnshare 当时是想着一个网页不需要装任何程序调音比较cool。native的话肯定没问题，这算法瓶颈全在FFT上，FFT轻易就能跑得飞快。
或者也可以用时域算法绕过FFT的限制。

[hustlzp]

楼主高产啊！

[durrrr]

找不到校音器就自己做一个。。
我对本专业的爱果然还是不够深，好失落

[Jelen]

FF卡了好久，运行不流畅

[JoyNeop]

Safari 用户表示严重关切

[lldld]

手机上有很多，可以下一个。
这个光FFT不够的，还要用算法算出峰值点.

[akfish]

@lldld FFT是一切频域音高检测算法的基础，这个精度不够后面就不用做了。我用的是HPS算法，就是检测谐波基本频率峰值的，可视化里那些白色的小圆就是频率峰值。

[ruoyu0088]

2048点FFT也可以精确测量频率的。你只需要进行连续两次FFT，找到峰值频率，然后计算该峰值在连续两次FFT中的相位变化，就可以对峰值频率进行修正得到更精确的频率值。

[akfish]

@ruoyu0088 revisit的时候会试验几种FFT插值法，抛物线插值，Quinn插值等，不过FFT相关的方法都是时域换频域，高频率分辨率就会有高延时，调音器还好，计划中复杂点的应用就不行了。估计最后我会抛弃频域方法。

[nicevoice]

你这p3有点大，加载又慢为什么不加速