dy / gl-spectrogram

:milky_way: Render spectrogram of any audio source in webgl or canvas2d
https://audio-lab.github.io/gl-spectrogram
62 stars 7 forks source link

provide a working demo that facilitates the use of the tool #6

Open nicopace opened 7 years ago

nicopace commented 7 years ago

What I expected:

Write now, the proposed example in the readme is not a complete example... it lacks a way to format data.

It is not clear how to structure the data that is pushed into the visualization.

I would expect a way to tell: sample (in dB) and timestamp (so I can receive information asynchronously).

What I found:

no working example that facilitates the use of the code.

konsumer commented 6 years ago

I am not a maintainer of this project, but I found it so useful, I'd like to help.

Did you have a look at the demo? At the bottom is a spectrogram.push() which is pushing the FFT audio-analyzer data, in a single slice of time. This is pretty standard for spectrograms, implemented in other languages. I'm not sure why you expect it to be dB + time, but that's not what a spectrogram does.

A spectrogram is a visual representation of the spectrum of frequencies of sound or other signal as they vary with time or some other variable.

The demo is doing FFT analysis to give you a visualization of the spectrum of frequencies that is playing as the music scrolls by the playhead (the right edge of the color.)

I must say, this is the nicest looking 2D spectrogram implemented in GLSL that I have seen, but it's pretty standard.

Also, as a sidenote, @dfcreative made this code for free. @dfcreative doesn't owe you the thing you have in your head (ill-conceived or not.) If you think it should do something else, submit a PR, or ask a question about how to get what you want (which @dfcreative is also not obligated to answer or integrate) or make your own, with free inspiration, that works the way you think this should. That's the cost of free software.

nicopace commented 6 years ago

You are very right @knosumer... wasn't polite at all in the way I pointed the issue, I'm sorry @dfcreative . I was actually working on using the spectrogram for another purpose... showing spectrum analysis done using wireless cards, so the samples don't come from a web api but from a web hook. I did some reviews of other visualization tools here, maybe you find them useful.

https://blog.freifunk.net/2017/06/26/choosing-spectrogram-visualization-library-javascript/