小编Bri*_*ock的帖子

背景

我的目标是创建一个基于JavaScript的Web应用程序来分析和显示音频源中的频率信息,包括页内源(<audio>标签)和从客户端麦克风流式传输的信号.我很顺便:)

作为一名敏锐的萨克斯手,我的目标之一是通过检查上部分与基本音高的分布来比较不同萨克斯手和乐器音调中固有的信息.简而言之,我想得出一个表示为什么不同的乐器演奏者和乐器品牌即使在播放相同音高时听起来也不同.另外,我想比较各种"替代指法"与同一播放器/乐器的传统或标准指法的调音和频率分布.

访问和显示频率信息是一个相当小的问题,使用JS AudioContext.analyserNode,我与HTML5 Canvas元素一起使用来创建频率图或'winamp-style bargraph',类似于'Visual Audio with Web Audio API'@ MDN.

问题

为了实现我的目标,我需要识别音频源中的一些特定信息,显着地以基音的赫兹频率,用于器乐器/乐器之间的直接比较,以及源的频率范围,以识别频谱.我感兴趣的声音.这些信息可以在fData下面的变量中找到...

// example...
var APP = function() {
    // ...select source and initialise etc..

    var aCTX = new AudioContext(),
        ANAL = aCTX.createAnalyser(),
        rANF = requestAnimationFrame,
        ucID = null;

    ANAL.fftSize = 2048;

    function audioSourceStream(stream) {

        var source = aCTX.createMediaStreamSource(stream);
        source.connect(ANAL);

        var fData = new Uint8Array(ANAL.frequencyBinCount);

        (function updateCanvas() {
            ANAL.getByteFrequencyData(fData);

            // using 'fData' to paint HTML5 Canvas

            ucID …