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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3775 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

fft

精度

audio

16 条回复 • 2014-08-29 15:22:03 +08:00

incompatible

2014-08-26 11:35:15 +08:00

界面美啊

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

akfish

2014-08-26 11:47:27 +08:00

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

seki

2014-08-26 11:54:34 +08:00

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

avrillavigne

2014-08-26 11:55:14 +08:00

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

learnshare

2014-08-26 11:59:56 +08:00

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

akfish

2014-08-26 12:03:23 +08:00

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

akfish

2014-08-26 12:05:16 +08:00

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

hustlzp

2014-08-26 12:07:09 +08:00

楼主高产啊！

durrrr

2014-08-26 13:33:43 +08:00

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

Jelen

2014-08-26 15:05:46 +08:00

FF卡了好久，运行不流畅

JoyNeop

2014-08-26 15:39:15 +08:00

Safari 用户表示严重关切

lldld

2014-08-26 18:13:53 +08:00

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

akfish

2014-08-26 18:37:43 +08:00

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

ruoyu0088

2014-08-26 19:59:20 +08:00

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

akfish

2014-08-26 20:39:30 +08:00

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

nicevoice

2014-08-29 15:22:03 +08:00

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