captbaritone / webamp

Winamp 2 reimplemented for the browser
https://webamp.org
MIT License
10.02k stars 662 forks source link

Spectrum Analyser results look wrong #93

Open captbaritone opened 9 years ago

captbaritone commented 9 years ago

They seem to be biased toward the low end, and a bit too homogenous. It also seems like there must be some signal to the left which we are not seeing.

@paez pointed us toward https://github.com/arirusso/d3-audio-spectrum

I wonder if @arirusso would be interested in helping us?

arirusso commented 9 years ago

Try setting the curve control to the right.

That control is for linear vs logarithmic representation -- logarithmic being to the right and generally how a traditional audio spectrum analyzer would be configured

Is this being used in this project?

captbaritone commented 9 years ago

http://spotiamp.com/ also seems to have reimplemented this functionality in a way that looks convincing. I wonder if we could get some input from Ludvig Strigeus who was it's original developer. I don't have any contact for him.

captbaritone commented 9 years ago

@arirusso We are not currently using any of your code, so we don't have any curve value to tweak. We aren't doing a logarithmic representation and that seems one of the major pieces we have been missing. Do you know if a traditional oscilloscope view would also use a logarithmic scale?

Thanks for taking a look for us. Our current code is very simple, you can see it here: https://github.com/captbaritone/winamp2-js/blob/master/visualizer.js#L145-L162

captbaritone commented 9 years ago

Looking at your project, I think I was misunderstanding what which axis you were talking about when you said "logarithmic representation". I was assuming it referred to the amplitude, but playing with your curve value, I see you were talking about the frequency, which would help us with the lopsided nature of what we are seeing.

arirusso commented 9 years ago

@captbaritone

An oscilloscope measures amplitude vs time whereas a spectrum analyzer (spectrometer) measures amplitude vs frequency

My understanding is that a basic spectrometer for electronic signals would most likely use a linear frequency curve. However, due to the exact problem that prompted you to start this thread, audio spectrometers use a logarithmic curve.

I'm not sure why I didn't default to logarithmic at the time-- I didn't anticipate a lot of users and probably just thought it looked better for the example music

captbaritone commented 9 years ago

My math is not good enough to grasp all of this stuff quickly, so it's taking me some time. I found this fantastic StackOverflow answer which does a great job of clearly explaining what the FFT outputs and how to process it: http://stackoverflow.com/questions/604453/analyze-audio-using-fast-fourier-transform?rq=1

Some of the answers in this StackOverflow answer touch on the log scaling that we are looking to implement: http://stackoverflow.com/questions/1997896/winamp-style-spectrum-analyzer

captbaritone commented 9 years ago

Pinging @stevetjoa

From his answer in the second link, it looks like he did some digging into how the Winamp visualizer works. Maybe he has some wisdom to share, or has an interest in helping.

PAEz commented 9 years ago

First up your loop is wrong, Im pretty sure its meant to be like this....

for (j=0,end=19;j<end;j+=1){
  var pos =Math.ceil((this.bufferLength/(end-1))*j); // the end-1 determines how far to go through the fft, you might want to increase this so as to miss the end one as its hardly ever activated even on a fully amped wave
  // console.debug(pos,j)
  height = this.dataArray[pos] * (15 / 256);
  printBar(j * 8, height);
}

I say that because of this article.... http://24ways.org/2013/make-your-browser-dance/ After that, expose analyzer to the console so you can play with these values while its playing.... analyser.minDecibels analyser.maxDecibels analyser.smoothingTimeConstant ...those 3 values will amp and affect the rate it changes. But I dont really know what the details are ;) Unfortunately from what I can tell winamp is maybe amping before it goes through the fft. I say this because playing a wav file thats at full amp looks more like winamps (but still not right, that example is still better at it) and the usual half amp looks um soft. I have no idea if you can do that with webaudios fft. But not matter how much I tweak those values I cant get it to look like that example I showed you. Failing that, if you look at that example I showed before he isnt using webaudios fft but their own.... https://github.com/arirusso/d3-audio-spectrum/blob/master/public%2Flib%2Fdsp.js#L257 ...so worse comes to worse we could always implement that.

PAEz commented 9 years ago

Problems....more problems..... As that article taught me, each value in the buffer corresponds to a frequency range. We only want to display the frequency ranges of 0-20000....well, 20000 is the max hearing range apparently but I think winamp may be restricting it to a bit below that. From what Ive seen, I would. BUT, some files dont have a frequency range that high. The demo your using has a sample rate of 22000, so only a frequency range of 11000. Thats why if you use that for loop in the last post it only does half the bars. The BIG prob is the one mentioned here... https://github.com/captbaritone/winamp2-js/issues/101 ...there is no way to know the real sample rate of the file so there is no way to know what frequency range we should limit the bars to.

Also relates to... https://github.com/captbaritone/winamp2-js/issues/81

Oh, and if you want to have a better understanding of what min/maxDecibels does (which really didnt need tweaking it really is mainly the frequency range), this was very helpful... http://stackoverflow.com/questions/14169317/interpreting-web-audio-api-fft-results