10

I'm looking for a way to create a audio bars visualizer similar to this in iOS.

enter image description here

Every white bar will move up and down depending of audio wave. I'm really lost because haven't much experience dealing with audio in Objective-c.

EDIT: What i'm seeking is what Overcast's app does on its visualizer (the group of vertical orange bars on the lower part of the podcast's image)

Anyone can help? Thanks

EDIT: Thanks to Tomer's answer I finally made it. First I did this tutorial in order to make it all clear. Then I created my own VisualizerView for my project, you can find it in this gist. Maybe is not perfect but it does what I needed to do.

WedgeSparda
  • 1,161
  • 1
  • 15
  • 40

1 Answers1

11

Generally, you have a few options if you want to get an idea of what something sounds like in iOS:

  • Use the simple AVAudioPlayer audio player, and then use the [audioPlayer averagePowerForChannel:] method to get the avarage audio level for the current moment. Check out this tutorial.
  • Use the Audio Queue API, which lets you send whatever audio you want to the speaker: You would read audio from your source and fill the buffers with it every time. (If you're reading from a file, use AVAssetReader) This way you always know exactly what waveform you're playing, so you can, for example, calculate its avarage power or process it in other ways like FFT. Then you'd update the bars accordingly.

EDIT: The standard way of doing such a thing is to use the Fast Fourier Transform (FFT) - it extracts frequency information from a sound. Here's a good example of using it on iOS (Apple's guide here). But, of course, to use it you have to know exactly what waveform you're playing every time, so you'd probably want to use a lower-level API such as Audio Queue.

Tomer
  • 3,149
  • 23
  • 26
  • 1
    I made a little test with averagePowerFor Channel: but it only shows two channels because is a stereo audio. How can that turn into a display with several bars? – WedgeSparda Aug 17 '15 at 07:11
  • @WedgeSparda Use SpriteKit and set `yScale` to a `float` value for the sound's amplitude. – DDPWNAGE Aug 17 '15 at 07:30
  • @WedgeSparda If you really want each bar to be completely independent of the others you can use FFT. This will give you the frequency components of the sound. Just google for "fft ios" and you'll find a lot of good material. Otherwise, you'd have to make some algroithm for changing the bars based on the avarage power. – Tomer Aug 17 '15 at 10:51
  • WedgeSparda, what are you using to play the audio? This is relevant in the answer, if you're playing audio files (either local or remote) and intend using AVPlayer, you'll need a different approach (and yes you can extract raw audio data from AVPlayer). Please expand on your intended use and i'll get some code for you. BTW, in the code suggested by @Tomer, the Hann window used isn't as effective in eliminating leakage with broader spectrum (you're not going to display 128 bars, try it, half will be -128 ) Blackman window is preferable in this instance. – MDB983 Aug 17 '15 at 16:46
  • Friends why this class so powerfull for CPU...70% iPhone 6 incredibly! – Genevios Sep 14 '17 at 13:15