Build an iOS Music Player - Tuts+ Premium


This three-part tutorial series will teach you how to build a custom music player with the iOS SDK. Read on!

Tutorial Teaser

Step 1: Updating the Storyboard

Open the storyboard and drag a table view controller from the Object Library to the canvas. We will use this Table View Controller to show a single album. CTRL-drag from the cell in the Albums Table View Controller to the new Table View Controller we just added and select "push" under the "Selection Segue" section from the pop-up menu.


Now we are going to create our cells.The first cell in the table view will contain some information about the album, such as the artwork, the album artist, the duration of the album, and the number of songs on the album. The other cell will contain the songs from the album. Select the cell and open the Attributes Inspector. Set the Identifier to "Cell" and change the Style from "Custom" to "Subtitle".

    Songs Cell

Now that we have created the cell for the songs, drag a new table view cell from the Object Library on top of the cell we just edited. Change it’s Selection Style from "Blue" to "None" and set the Identifier to "InfoCell". After that, open the Size Inspector and change the Row Height to 120.

In this cell, we will need an image view for the artwork and two labels for the information. So, first, drag an Image View into the cell and change its size to 100x100. Also change the X and Y properties to 10. After that, drag the two labels in the cell and align them like the image below:

    Album Information Cell

Select the first label, open the Attributes Inspector, and then change the Font to "System Bold 17.0". Next, delete the text from both the labels and change the tag from the first label to 101 and the tag from the second label to 102. At last, select the image view and change its tag to 100. We will use these tags to adjust the labels and image view in the tableView:cellForRowAtIndexPath: method.

Step 2: Display a Selected Album

Go to "File" > "New" > "File..." to create a new file. Select "Objective-C class" and then click "Next". Enter "AlbumViewController" for the class and make sure that it’s a subclass of UITableViewController and that both the checkboxes are not selected. Click "Next" again and than click "Create".

Open AlbumViewController.h and modify the code to read as follows:

#import <UIKit/UIKit.h>
#import <MediaPlayer/MediaPlayer.h>

@interface AlbumViewController : UITableViewController
    NSString *albumTitle;

@property NSString *albumTitle;


Here, we basically just add the MediaPlayer framework to our table view controller and we create an NSString which will contain the album title. We will update this string when the user selects an album.

Now open AlbumsViewController.m and add the following line under #import "AlbumsViewController.h":

#import "AlbumViewController.h"

After that, add the following method:

- (void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
    AlbumViewController *detailViewController = [segue destinationViewController];
    MPMediaQuery *albumsQuery = [MPMediaQuery albumsQuery];
    NSArray *albums = [albumsQuery collections];
    int selectedIndex = [[self.tableView indexPathForSelectedRow] row];
    MPMediaItem *selectedItem = [[albums objectAtIndex:selectedIndex] representativeItem];
    NSString *albumTitle = [selectedItem valueForProperty:MPMediaItemPropertyAlbumTitle];
    [detailViewController setAlbumTitle:albumTitle];

Here we pass the title of the selected album to the detailViewController, which is the AlbumViewController. The storyboard will call this method at runtime when you trigger a segue in the current scene (i.e. when the user selects an album).

Now open AlbumViewController.m and add the following line under the @implementation:

@synthesize albumTitle;

After that, go to the viewDidLoad method and change it to read as follows:

- (void)viewDidLoad
    [super viewDidLoad];
    self.title = albumTitle;

Here, we simply set the the title of the navigation bar to the selected album title.

Now that we have created a new screen for the selected album, I think it’s a good idea to test the app. Click Build and Run to test the app. If you go to the albums tab and select an album, you will go to a new screen with an empty table view, but the title of the navigation bar should be the same as the selected album.

Get the Full Series!

This tutorial series is available to Tuts+ Premium members only. Read a preview of this tutorial on the Tuts+ Premium web site or login to Tuts+ Premium to access the full content.

Joining Tuts+ Premium. . .

For those unfamiliar, the family of Tuts+ sites runs a premium membership service called Tuts+ Premium. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Mobiletuts+, Nettuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+. You'll learn from some of the best minds in the business. Become a premium member to access this tutorial, as well as hundreds of other advanced tutorials and screencasts.

Related Posts
  • Code
    iOS SDK
    Getting Started with UIKit Dynamics84oke preview image
    In the previous tutorial, I explained a few new features of iOS 7 that let you add subtle animations and greater interactivity with surprisingly little code to simulate real world physics. In this tutorial, I'll show you how to create a hidden form on a search results page.Read More…
  • Code
    iOS SDK
    Blocks and Table View Cells on iOS94dp7 preview image@2x
    A table view cell doesn't know about the table view it belongs to and that's fine. In fact, that's how it should be. However, people who are new to this concept are often confused by it. For example, if the user taps a button in a table view cell, how do you obtain the index path of the cell so you can fetch the corresponding model? In this tutorial, I'll show you how not to do this, how it's usually done, and how to do this with style and elegance.Read More…
  • Code
    iOS SDK
    Working with NSURLSession: Part 3E548b preview image@2x
    In the previous tutorials, we explored the fundamentals of the NSURLSession API. There is one other feature of the NSURLSession API that we haven't look into yet, that is, out-of-process uploads and downloads. In the next two tutorials, I will show you how to create a very simple podcast client that enables background downloads.Read More…
  • Code
    iOS SDK
    iOS Succinctly - Multi-Scene ApplicationsIos succinctly preview1
    The previous chapter introduced the basic workflow of iOS application development, but we worked within the confines of a single-view application. Most real-world applications, however, require multiple scenes to present data hierarchically. While there are many types of organizational patterns used for managing multi-scene apps, this chapter looks at one of the most common patterns: the master-detail application.Read More…
  • Code
    iOS SDK
    iOS SDK: Crafting Custom UITableView CellsStock xcode icon@2x copy
    A handful of predefined cell styles have been available to developers since iOS 3. They are convenient and very useful for prototyping, but in many situations you really need a custom solution tailored to the needs of the project you are working on. In this tutorial, I will show you how to customize table view cells by using static and prototype cells, and by subclassing UITableViewCell.Read More…
  • Code
    iOS SDK
    Build an iOS Music Player: Player ControlsCode
    This three-part tutorial series will teach you how to build a custom music player with the iOS SDK. Read on!Read More…