How To Make a Music Visualizer in iOS

In the mid-seventies, Atari released the Atari Home Music player that connected a television to a stereo and thereby produced abstract images in sync with the music. Consumers could manipulate the images by twisting knobs and pushing buttons on the device.

The device was a market failure but it was the first time that the world was exposed to music visualization. Now, music visualization is a common technology that can be found in almost every digital media player such as iTunes or Windows Media Player.

To see an example of music visualization in action, simply launch iTunes, start a good tune, then choose View/Show Visualizer and allow the psychedelics to free your mind! :]

In this tutorial, you’ll create your very own music visualizer. You’ll learn how to configure the project to play music as well as support background audio and to create particle effects using UIKit’s particle system. You’ll also learn how to make those particles dance to the beat of a song.

So cue up the music and break out the disco ball, things are about to get visual!

Note: You can try out most of the tutorial using the iPhone Simulator, but you will need to run the project on a device to select different songs and to play the music in the background.

Starter project

To start things off, download this starter project. The starter project has the following functionality:

1. It provides a simple user interface for the application.
2. The supported interface orientation is set to landscape.
3. The MediaPlayer.framework has been added to the project.
4. It contains a method which allows you to pick songs from your iPod library.
5. An image named particleTexture.png was added to the project for use by the particle system.
6. The MeterTable.h and MeterTable.cpp C++ files were also added to the project. These were taken from the Apple sample project avTouch, and will be explained later on in this tutorial.

First, extract the downloaded project, open it in Xcode, and build and run. You should see the following:

You can tap the play button to switch between play and pause modes but you won’t hear any music until after you’ve added some code. Tap on the black area in the middle to hide/show the navigation bar and tool bar.

If you’re running in the iPhone Simulator and tap the magnifying glass icon on the bottom left, you’ll see the following warning:

This is because the iPhone Simulator doesn’t support accessing the music library. But if you are running on a device, a tap on that icon will make the media picker appear, so that you can choose a song.

Once you are familiar with the user interface, let’s get started.

Let the Music Play

Using AVAudioPlayer is an easy way to play music on an iOS device. AVAudioPlayer can be found in the AVFoundation.framework, so you need to add this framework to your project.

Note: If you are interested in learning more about the AVAudioPlayer class and what it can do, take a look at our Audio 101 for iPhone Developers: Playing Audio Programatically tutorial.

Select iPodVisualizer in the Project Navigator and then select iPodVisualizer under TARGETS. Choose the Build Phases tab, expand the Link Binary With Libraries section, then click the + (plus) button.

Search for AVFoundation.framework in the pop up list, select it, and click Add. The framework should now appear in your project.

It’s time to write some code. Open ViewController.m and make the following changes:

// Add to the #imports section at the top of the file
#import <AVFoundation/AVFoundation.h>

// Add the following under the comment that reads "Add properties here"
@property (strong, nonatomic) AVAudioPlayer *audioPlayer;

This imports the AVFoundation.h header file so you can access AVAudioPlayer, and then adds a property that will hold the AVAudioPlayer instance your app will use to play audio.

And now, it’s time to play a music file.

The starter project includes a music file named DemoSong.m4a in the Resources folder that you can use. Feel free to use a different audio file if you’d like. Just remember, only the following audio codecs are supported on iOS devices for playback:

• AAC (MPEG-4 Advanced Audio Coding)
• ALAC (Apple Lossless)
• HE-AAC (MPEG-4 High Efficiency AAC)
• iLBC (internet Low Bitrate Codec, another format for speech)
• IMA4 (IMA/ADPCM)
• Linear PCM (uncompressed, linear pulse-code modulation)
• MP3 (MPEG-1 audio layer 3)
• µ-law and a-law

Still in ViewController.m, add the following method:

- (void)configureAudioPlayer {
    NSURL *audioFileURL = [[NSBundle mainBundle] URLForResource:@"DemoSong" withExtension:@"m4a"];
    NSError *error;
    self.audioPlayer = [[AVAudioPlayer alloc] initWithContentsOfURL:audioFileURL error:&error];
    if (error) {
        NSLog(@"%@", [error localizedDescription]);
    }
    [_audioPlayer setNumberOfLoops:-1];
}

This method creates a reference to the music file and stores it as an audioFileURL. It then create a new AVAudioPlayer instance initialized with the audioFileURL and sets its numberOfLoops property to -1 to make the audio loop forever.

Note: If you decide to use a music file other than the provided one, do remember to add the new file to the Xcode project and to change the music file name (and perhaps the extension) in the above method.

Add the following line to the end of viewDidLoad:

[self configureAudioPlayer];

By calling configureAudioPlayer: in viewDidLoad:, you set up the audio player as soon as the view loads and so are able to press the play button on app start and have the app play your song.

Now add the following line inside playPause, just after the comment that reads // Pause audio here:

[_audioPlayer pause];

Next, add the following line in the same method, just after the comment that reads // Play audio here:

[_audioPlayer play];

Tapping the play/pause button calls playPause. The code you just added tells audioPlayer to play or pause according to its current state as defined by _isPlaying. As the name indicates, this property identifies whether the audio player is currently playing audio or not.

Now build and run. If you did everything correctly the app will look exactly the same. But now you can play/pause your music.

Take this brief moment to get your funk on! :]