IOS Programming -Building a simple AudioPlayer in iOS

Building a simple AudioPlayer in iOS

Thomas Zinnbauer

Mobile Software Engineer - YMC AG

15. August 2013

This tutorial describes how to build a simple AudioPlayer Element for a native iPhone App. It will play an mp3 file with a simple AudioPlayer interface, containing a play and pause button, a slider with scrubbing functionality and a display for duration and elapsed time. The code is written with Xcode 5. Xcode versions below this will not be able to build and run the project. I will not go too much into detail about simple steps like how to create a new Xcode project or adding sources to a project. This knowledge is assumed for this tutorial. The full iOS app project source code can be downloaded from GitHub. At the end, the AudioPlayer will look like this:

Let’s start coding

First of all a “Single View Application” in Xcode has to be created as a new project. Then the supporting files should be added like an .mp3 audio file and images containing a play and a pause button. After setting up the project, the first step is to create the player items in the .storyboard file. Adding a button with a playbutton image, a slider and two empty textLabels is all you need. So your storyboard should look like this:

AudioPlayer Class

Next step is to create an AudioPlayer Class. It can be grouped into a folder named “AudioPlayer” for example. The YMCAudioPlayer.h file should look like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

#import <UIKit/UIKit.h> #import <AVFoundation/AVFoundation.h>   @interface YMCAudioPlayer : UIViewController   @property (nonatomic, retain) AVAudioPlayer *audioPlayer;   // Public methods - (void)initPlayer:(NSString*) audioFile fileExtension:(NSString*)fileExtension; - (void)playAudio; - (void)pauseAudio; - (void)setCurrentAudioTime:(float)value; - (float)getAudioDuration; - (NSString*)timeFormat:(float)value; - (NSTimeInterval)getCurrentAudioTime;   @end

The “audioPlayer” property is a type of AVAudioPlayer, the built in class from the AVFoundationframework. To control the AudioPlayer, several public classes are needed. The Init, play and pause methods need no explanation I think. setCurrentAudioTime is to set the position at what time the audio file will be played. getAudioDuration returns the length of the audio track as a float value that can be converted to a timeFormat with the method of the same name. getCurrentAudioTime returns the current position where the audio file is playing right now.
The YMCAudioPlayer.m file should look like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

#import "YMCAudioPlayer.h"   @implementation YMCAudioPlayer   /* * Init the Player with Filename and FileExtension */ - (void)initPlayer:(NSString*) audioFile fileExtension:(NSString*)fileExtension {     NSURL *audioFileLocationURL = [[NSBundle mainBundle] URLForResource:audioFile withExtension:fileExtension];     NSError *error;     self.audioPlayer = [[AVAudioPlayer alloc] initWithContentsOfURL:audioFileLocationURL error:&error]; }   /* * Simply fire the play Event */ - (void)playAudio {     [self.audioPlayer play]; }   /* * Simply fire the pause Event */ - (void)pauseAudio {     [self.audioPlayer pause]; }   /* * Format the float time values like duration * to format with minutes and seconds */ -(NSString*)timeFormat:(float)value{       float minutes = floor(lroundf(value)/60);     float seconds = lroundf(value) - (minutes * 60);       int roundedSeconds = lroundf(seconds);     int roundedMinutes = lroundf(minutes);       NSString *time = [[NSString alloc]                       initWithFormat:@"%d:%02d",                       roundedMinutes, roundedSeconds];     return time; }   /* * To set the current Position of the * playing audio File */ - (void)setCurrentAudioTime:(float)value {     [self.audioPlayer setCurrentTime:value]; }   /* * Get the time where audio is playing right now */ - (NSTimeInterval)getCurrentAudioTime {     return [self.audioPlayer currentTime]; }   /* * Get the whole length of the audio file */ - (float)getAudioDuration {     return [self.audioPlayer duration]; }   @end

The init method is to set up the internal “audioPlayer” property with the AVAudioPlayer class. The filename is required as an argument:

1	self.audioPlayer = [[AVAudioPlayer alloc] initWithContentsOfURL:audioFileLocationURL error:&error];

After that [self.audioPlayer play]; can be called directly to play the audio. I just added seperate methods arround the play and the pause commands to keep the commands consistent and keep the ability to add some code later. For example, if pause is pressed, the current player position can be stored with NSUserDefaults.
The timeFormat method returns a nice time formatted string from the given float value by rounding, dividing and string formatting like 01:38 for example.

ViewController Class

Next step is to edit the automatically created ViewController Class. The ViewController.h file should look like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

#import <UIKit/UIKit.h> #import "YMCAudioPlayer.h"   @interface ViewController : UIViewController   @property (nonatomic, strong) YMCAudioPlayer *audioPlayer;   @property (weak, nonatomic) IBOutlet UISlider *currentTimeSlider; @property (weak, nonatomic) IBOutlet UIButton *playButton; @property (weak, nonatomic) IBOutlet UILabel *duration; @property (weak, nonatomic) IBOutlet UILabel *timeElapsed;   @property BOOL isPaused; @property BOOL scrubbing;   @property NSTimer *timer;   @end

The previously edited YMCAudioPlayer class can now be included here. And once again the “audioPlayer” property is cast into this class. The IBOutlet properties have now to be connected to the storyboard elements we created before. Simply drag the properties to its respective element in the storyboard with the assistant editor view:

The ViewController.m file should look like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119

#import "ViewController.h"   @interface ViewController ()   @end   @implementation ViewController   - (void)viewDidLoad {     [super viewDidLoad];     self.audioPlayer = [[YMCAudioPlayer alloc] init];     [self setupAudioPlayer:@"audiofile"]; }   /*  * Setup the AudioPlayer with  * Filename and FileExtension like mp3  * Loading audioFile and sets the time Labels  */ - (void)setupAudioPlayer:(NSString*)fileName {     //insert Filename & FileExtension     NSString *fileExtension = @"mp3";       //init the Player to get file properties to set the time labels     [self.audioPlayer initPlayer:fileName fileExtension:fileExtension];     self.currentTimeSlider.maximumValue = [self.audioPlayer getAudioDuration];       //init the current timedisplay and the labels. if a current time was stored     //for this player then take it and update the time display     self.timeElapsed.text = @"0:00";       self.duration.text = [NSString stringWithFormat:@"-%@",                           [self.audioPlayer timeFormat:[self.audioPlayer getAudioDuration]]];   }   /*  * PlayButton is pressed  * plays or pauses the audio and sets  * the play/pause Text of the Button  */ - (IBAction)playAudioPressed:(id)playButton {     [self.timer invalidate];     //play audio for the first time or if pause was pressed     if (!self.isPaused) {         [self.playButton setBackgroundImage:[UIImage imageNamed:@"audioplayer_pause.png"]                                    forState:UIControlStateNormal];           //start a timer to update the time label display         self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0                                                       target:self                                                     selector:@selector(updateTime:)                                                     userInfo:nil                                                      repeats:YES];           [self.audioPlayer playAudio];         self.isPaused = TRUE;       } else {         //player is paused and Button is pressed again         [self.playButton setBackgroundImage:[UIImage imageNamed:@"audioplayer_play.png"]                                    forState:UIControlStateNormal];           [self.audioPlayer pauseAudio];         self.isPaused = FALSE;     } }   /*  * Updates the time label display and  * the current value of the slider  * while audio is playing  */ - (void)updateTime:(NSTimer *)timer {     //to don't update every second. When scrubber is mouseDown the the slider will not set     if (!self.scrubbing) {         self.currentTimeSlider.value = [self.audioPlayer getCurrentAudioTime];     }     self.timeElapsed.text = [NSString stringWithFormat:@"%@",                              [self.audioPlayer timeFormat:[self.audioPlayer getCurrentAudioTime]]];       self.duration.text = [NSString stringWithFormat:@"-%@",                           [self.audioPlayer timeFormat:[self.audioPlayer getAudioDuration] - [self.audioPlayer getCurrentAudioTime]]]; }   /*  * Sets the current value of the slider/scrubber  * to the audio file when slider/scrubber is used  */ - (IBAction)setCurrentTime:(id)scrubber {     //if scrubbing update the timestate, call updateTime faster not to wait a second and dont repeat it     [NSTimer scheduledTimerWithTimeInterval:0.01                                      target:self                                    selector:@selector(updateTime:)                                    userInfo:nil                                     repeats:NO];       [self.audioPlayer setCurrentAudioTime:self.currentTimeSlider.value];     self.scrubbing = FALSE; }   /*  * Sets if the user is scrubbing right now  * to avoid slider update while dragging the slider  */ - (IBAction)userIsScrubbing:(id)sender {     self.scrubbing = TRUE; }   - (void)didReceiveMemoryWarning {     [super didReceiveMemoryWarning];     // Dispose of any resources that can be recreated. }   @end

Here in our view, the methods of the YMCAudioPlayer class can be called, processed and assigned to view elements. In the automatically called viewDidLoad method, the internal “audioPlayer” property gets initialised as a YMCAudioPlayer.

1	self.audioPlayer = [[YMCAudioPlayer alloc] init];

After that, the setupAudioPlayer method can be called. This method sets the textLabels for example the “timeElapsed” property:

1	self.timeElapsed.text = @"0:00";

Or the “duration” property using the timeFormat method for the return value of our before createdgetAudioDuration method:

1 2	self.duration.text = [NSString stringWithFormat:@"-%@",                           [self.audioPlayer timeFormat:[self.audioPlayer getAudioDuration]]];

The following method playAudioPressed is simply connected as an IBAction with the playButton:

This method checks the “isPaused” property to handle the display of the button images depending on the current state (if playing or paused). A timer function is also called here to update the textLabels with the updateTime method every second with the new formatted time values of the played audio. The value of the slider position will also be updated here.

1 2 3 4 5 6 7 8 9 10 11

- (void)updateTime:(NSTimer *)timer {     //to don't update every second. When scrubber is mouseDown the the slider will not set     if (!self.scrubbing) {         self.currentTimeSlider.value = [self.audioPlayer getCurrentAudioTime];     }     self.timeElapsed.text = [NSString stringWithFormat:@"%@",                              [self.audioPlayer timeFormat:[self.audioPlayer getCurrentAudioTime]]];       self.duration.text = [NSString stringWithFormat:@"-%@",                           [self.audioPlayer timeFormat:[self.audioPlayer getAudioDuration] - [self.audioPlayer getCurrentAudioTime]]]; }

The “scrubbing” property is to check if the user is currently dragging the slider. In this case the slider position should not be updated every second. Otherwise the slider will be flickering due to it updating the current position and the current dragged position at the same time.
The method setCurrentTime is to set exactly this audio position as a further IBAction element. Also the userIsScrubbing method is connected to the UISlider element, especially for the Touch drag Inside event, to check if the user is dragging the slider. If setCurrentTime is called, the scrubbing property is set to false again:

After all methods are connected to the elements in the storyboard we’re ready to make a build and run the app with our AudioPlayer element.
The full iOS app project source code can be downloaded on GitHub.
I’m looking forward to your comments or requests for new articles.