muhku / FreeStreamer

A low-memory footprint streaming audio player for iOS and OS X
http://muhku.github.io/FreeStreamer/
Other
2.11k stars 437 forks source link

Equalizer-bars visualization of streaming audio. #349

Open eyeezzi opened 7 years ago

eyeezzi commented 7 years ago

Anyone know of a way to visualize streaming data as equalizer bars instead of the squiggly line? I've done a fair bit of research on this: accessing the raw PCM audiobuffers and passing an array of floats to EZAudio (which is one library that could supposedly visualize such audio data), however, the visualization comes out all scrambled up, so I am turning here instead...now that I'm running short on my deadline.

It would be nice if the author of this great library can also provide an equalizer-bars-type visualization in addition to the line graph. Thanks.

What I'm looking for but nothing fancy, just bars that can go up and down. image

iDevelopper commented 7 years ago

+1

iDevelopper commented 7 years ago

@eyeezzi , did you find the solution?

cutmaster commented 7 years ago

Seems that we've got everything in FSFrequencyPlotView and especially in drawRect. The part starting with CGContextRef context = UIGraphicsGetCurrentContext(); and ending with CGContextStrokePath(context); gives you everything to create it by your own. There are X analyzed Frequencies values (X is #define kFSFrequencyPlotViewMaxCount) and the draw method shows you how to draw those frequencies. The author made it with a line but you can use some of the methods used to draw a rectangle, something like this (to put in the for loop) :

    CGRect rectangle = CGRectMake(levelWidth * (i-1), height - (_levels[i] * height), 3, (_levels[i] * height));
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);
        CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
        CGContextFillRect(context, rectangle);

It's just a simple example. The better you can do is to introduce some inertia on it to have smooth bars, then maybe a peak bar (which goes down slower than the bar itself), etc... And if you want a gradient like in your image, the best you can do is to use an image and change the code using UIImage and its drawInRect method instead ;-)

Hope this will help...

iDevelopper commented 7 years ago

@cutmaster , Thanks for your response. I achieved to do this to visualize the graph histogram. But now the question is: How to modify the EQ bands levels with this library (Equalizer settings). Is it possible?

Or do you know a library who can do these requirements? (Visualization and set parameters).

With StreamingKit we can set gains for band, but no visualization. With FreeStreamer, we can visualize the band levels but not set gains for them...

Thanks

cutmaster commented 7 years ago

Hey iDevelopper, Well nope, you can't use this library as it to modify/change the EQ (if it is what I've understood)... The fact is that you will need to process the audio buffers before they're played, the way you'll need to change the frequencies according to your settings. If streamingKit allows to change the gain for bands, maybe you'd better start with it then add visualization on it (it's easier to do ;))

iDevelopper commented 7 years ago

Thanks, you understood.

"it's easier to do", could you give me a starting point for visualization?

iDevelopper commented 7 years ago

Hi, how to retrieve the frequency (frequency bands) corresponding to _levels[i]?