V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
akfish

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

  •  3
     
  •   akfish ·
    akfish · Aug 26, 2014 · 6908 views
    This topic created in 4262 days ago, the information mentioned may be changed or developed.

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

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

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

    16 replies    2014-08-29 15:22:03 +08:00
    incompatible
        1
    incompatible  
       Aug 26, 2014
    界面美啊

    不过确实是脑洞够大。找不到调音器了用耳朵凑合一下不就行了吗。。
    akfish
        2
    akfish  
    OP
       Aug 26, 2014
    @incompatible 当时要用非标准调弦,Open G神马的不熟。。。
    seki
        3
    seki  
       Aug 26, 2014
    看着好赞,其实直接拿来当背景就挺好的 = =
    avrillavigne
        4
    avrillavigne  
       Aug 26, 2014
    Mozilla/5.0 (Windows NT 6.1; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0
    被残忍拒绝了。
    learnshare
        5
    learnshare  
       Aug 26, 2014   ❤️ 1
    不错,Web Audio 还没高大上到调音的程度,可以尝试用本地的程序结合 H5 的界面来做?
    akfish
        6
    akfish  
    OP
       Aug 26, 2014
    @avrillavigne FF的图形性能一直不如Chrome,然后processing.js的性能也不是各种绘图库里最好的,于是就蛋疼了。
    akfish
        7
    akfish  
    OP
       Aug 26, 2014
    @learnshare 当时是想着一个网页不需要装任何程序调音比较cool。native的话肯定没问题,这算法瓶颈全在FFT上,FFT轻易就能跑得飞快。
    或者也可以用时域算法绕过FFT的限制。
    hustlzp
        8
    hustlzp  
       Aug 26, 2014
    楼主高产啊!
    durrrr
        9
    durrrr  
       Aug 26, 2014
    找不到校音器就自己做一个。。
    我对本专业的爱果然还是不够深,好失落
    Jelen
        10
    Jelen  
       Aug 26, 2014
    FF卡了好久,运行不流畅
    JoyNeop
        11
    JoyNeop  
       Aug 26, 2014
    Safari 用户表示严重关切
    lldld
        12
    lldld  
       Aug 26, 2014
    手机上有很多,可以下一个。
    这个光FFT不够的,还要用算法算出峰值点.
    akfish
        13
    akfish  
    OP
       Aug 26, 2014
    @lldld FFT是一切频域音高检测算法的基础,这个精度不够后面就不用做了。我用的是HPS算法,就是检测谐波基本频率峰值的,可视化里那些白色的小圆就是频率峰值。
    ruoyu0088
        14
    ruoyu0088  
       Aug 26, 2014
    2048点FFT也可以精确测量频率的。你只需要进行连续两次FFT,找到峰值频率,然后计算该峰值在连续两次FFT中的相位变化,就可以对峰值频率进行修正得到更精确的频率值。
    akfish
        15
    akfish  
    OP
       Aug 26, 2014
    @ruoyu0088 revisit的时候会试验几种FFT插值法,抛物线插值,Quinn插值等,不过FFT相关的方法都是时域换频域,高频率分辨率就会有高延时,调音器还好,计划中复杂点的应用就不行了。估计最后我会抛弃频域方法。
    nicevoice
        16
    nicevoice  
       Aug 29, 2014
    你这p3有点大,加载又慢为什么不加速
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1250 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 114ms · UTC 23:36 · PVG 07:36 · LAX 16:36 · JFK 19:36
    ♥ Do have faith in what you're doing.