I want to get a current frequency with Web audio API

Question

I don't need Visualization, just want to get real current numbers of the frequency, but with getFloatFrequencyData(freqDomain) I will get a array. How can I get just one exactly changeful frequency from real time? So here I use the freqDomain[1] as the value of the frequency, but the value is wrong. It's always about -100. I think our tone should be min. 250 Hz. Someone can help me?

This is my code：

 MicrophoneSample.prototype.visualize = function() {
  this.canvas.width = this.WIDTH;
  this.canvas.height = this.HEIGHT;
  var drawContext = this.canvas.getContext('2d');

  var freqDomain = new Float32Array(this.analyser.frequencyBinCount);
  this.analyser.getFloatFrequencyData(freqDomain);

  var f = Math.round(freqDomain[1]);
   
    var text = f + ' Hz';
    document.getElementById('frequency').innerHTML = text ;

  requestAnimFrame(this.visualize.bind(this));
};

Answer 1

This kind of rudimentary technique only ever works on artificial signals. It will fail dismally on any kind of real-word audio signal, and particularly with one produced by just about any kind of musical instrument relying on a vibrating column of air or string - or the human voice.

By using the STFT, you can get far better resolution than the centre frequency of each bin by computing phase difference at each bin from the bin in a previous FFT. This hinges on the relationship

F = dPhi/dt

Or in other words, that frequency is the rate of change of phase.

However, you will require a 2048-point FFT to get decent resolution at below 100Hz.