9 min read
.
on Jul 7, 2016
With the steady rise of Apple Music, Apple has released an API allowing developers to check if a user is an Apple Music member, check which country the user account is associated with, queue up songs …

With the steady rise of Apple Music, Apple has released an API allowing developers to check if a user is an Apple Music member, check which country the user account is associated with, queue up songs using song id’s for playback and can look at playlists the user already has or create a new one. This opens up a vast amount of possibilities to developers to create exciting new music applications, especially with how prevalent digital music services are now in peoples lives.

 

What the Radio Station App Does

In this tutorial we’ll create a realtime radio station. If a user is a Apple music member, they’ll be able to search for songs with the iTunes search API to queue up for playback and DJ their own radio station. On top of that, they’ll receive listener feedback through upvotes and downvotes in real time. A user will also be able to be a listener by connecting to a radio station and upvote or downvote that station.

 

Getting Started with the PubNub Swift SDK

We’ll start off by including the SDK into our project. The easiest way to do this is with CocoaPods, which is a dependency manager for Swift projects. If you’ve never used CocoaPods before, check out how to install CocoaPods and use it!

After you have installed cocoapods, go into your project’s root directory and type:

$ (your favorite editor) Podfile

Paste the following code into your Podfile:

source 'https://github.com/CocoaPods/Specs.git'

use_frameworks!

platform :ios, '9.0'

target 'YourProjectName' do

pod 'PubNub'

end

Finish it off by typing:

$ pod install

Now open the file YourProjectName.xcworkspace

 

App Setup in Account

You will need a PubNub account in order to get your own unique keys and to turn on some PubNub features we will need for this project. If you don’t already have an account, go ahead and sign up for a free account to get your own publish and subscribe keys. Head over to the PubNub Developer Dashboard and create a new app, enable the Storage and Playback feature and the Presence feature.

Connect to PubNub from the AppDelegate

In order to use the PubNub features, we must create a PubNub instance property.

Open your AppDelegate.swift file and add this before the class declaration:

import PubNub

We will then create the PubNub instance, replace the “demo” keys with your own respective publish and subscribe keys in the parameters of the PNConfiguration.

class AppDelegate: UIResponder, UIApplicationDelegate, PNObjectEventListener {
    var window: UIWindow?
    lazy var client: PubNub = {
        let config = PNConfiguration(publishKey: "demo", subscribeKey: "demo")
        let pub = PubNub.clientWithConfiguration(config)
        return pub
    }()

 

Request App Access to Apple Music

Before anything, we need to request access to the user’s Apple Music library and then check if their device is capable of Apple Music playback when they first open the app.

This is achieved using the SKCloudServiceController inside of the AppDelegate.swift file within the applicationDidBecomeActive function:

func applicationDidBecomeActive(application: UIApplication) {
        // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
        //Ask user for for Apple Music access
        SKCloudServiceController.requestAuthorization { (status) in
            if status == .Authorized {
                let controller = SKCloudServiceController()
                //Check if user is a Apple Music member
                controller.requestCapabilitiesWithCompletionHandler({ (capabilities, error) in
                    if error != nil {
                        dispatch_async(dispatch_get_main_queue(), {
                            self.showAlert("Capabilites error", error: "You must be an Apple Music member to use this application")
                        })
                    }
                })
            } else {
                dispatch_async(dispatch_get_main_queue(), {
                    self.showAlert("Denied", error: "User has denied access to Apple Music library")
                })
            }
        }
    }

 

Search iTunes and display results

Once it’s confirmed that the user is a Apple Music member, the searchItunes() function will use the iTunes Search API to make a GET request for whatever input the user provided from the searchBarSearchButtonClicked() function:

//Search iTunes and display results in table view
func searchItunes(searchTerm: String) {
    Alamofire.request(.GET, "https://itunes.apple.com/search?term=\(searchTerm)&entity=song")
    .validate()
    .responseJSON { response in
        switch response.result {
        case .Success:
            if let responseData = response.result.value as? NSDictionary {
                if let songResults = responseData.valueForKey("results") as? [NSDictionary] {
                    self.tableData = songResults
                    self.tableView!.reloadData()
                }
            }
         case .Failure(let error):
             self.showAlert("Error", error: error.description)
         }
      }
}
func searchBarSearchButtonClicked(searchBar: UISearchBar) {
    //Search iTunes with user input
    if searchBar.text != nil {
        let search = searchBar.text!.stringByReplacingOccurrencesOfString(" ", withString: "+")
        searchItunes(search)
        searchBar.resignFirstResponder()
    }
}

 

Once we get this data, it will be displayed in a table view allowing the user to pick a track and add it to their playback queue:

//Display iTunes search results
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: nil)
    if let rowData: NSDictionary = self.tableData[indexPath.row] as? NSDictionary,
       urlString = rowData["artworkUrl60"] as? String,
       imgURL = NSURL(string: urlString),
       imgData = NSData(contentsOfURL: imgURL) {
       cell.imageView?.image = UIImage(data: imgData)
       cell.textLabel?.text = rowData["trackName"] as? String
       cell.detailTextLabel?.text = rowData["artistName"] as? String
    }
    return cell
}
//Add song to playback queue if user selects a cell
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    let indexPath = tableView.indexPathForSelectedRow
    if let rowData: NSDictionary = self.tableData[indexPath!.row] as? NSDictionary, urlString = rowData["artworkUrl60"] as? String,
        imgURL = NSURL(string: urlString),
        imgData = NSData(contentsOfURL: imgURL) {
        queue.append(SongData(artWork: UIImage(data: imgData), trackName: rowData["trackName"] as? String, artistName: rowData["artistName"] as? String, trackId: String (rowData["trackId"]!)))
        //Show alert telling the user the song was added to the playback queue
        let addedTrackAlert = UIAlertController(title: nil, message: "Added track!", preferredStyle: .Alert)
        self.presentViewController(addedTrackAlert, animated: true, completion: nil)
        let delay = 0.5 * Double(NSEC_PER_SEC)
        let time = dispatch_time(DISPATCH_TIME_NOW, Int64(delay))
        dispatch_after(time, dispatch_get_main_queue(), {
            addedTrackAlert.dismissViewControllerAnimated(true, completion: nil)
        })
        tableView.deselectRowAtIndexPath(indexPath!, animated: true)
    }
}

 

 

Searching with the iTunes API and displaying the song data in a table view

 

Creating a Radio Station

After the user finishes adding tracks to their playback queue, they can create a radio station. A dialogue is presented for the user to name their radio station. This name is also used for their channel. A PubNub channel cannot contain a comma, colon, asterisk, slash or backslash, the createValidPNChannel() makes sure of this by deleting any of those characters in the name. It then gets the current timestamp to concatenate to the name so the channel will have a unique name.

//Create station name and segue to radio station if playback queue isn't empty
@IBAction func takeInputAndSegue(sender: AnyObject) {
    let alert = UIAlertController(title: "Name your radio station!", message: nil, preferredStyle: .Alert)
    alert.addTextFieldWithConfigurationHandler(nil)
    alert.addAction(UIAlertAction(title: "OK", style: .Default, handler: { (action) -> Void in
    if !self.queue.isEmpty {
        let radioStationName = alert.textFields![0] as UITextField
    if !radioStationName.text!.isEmpty && radioStationName.text?.characters.count <= 60 {
        let stationName = radioStationName.text!
        //Adds a timestamp to the station name to make it a unique channel name
        let channelName = self.createValidPNChannel(stationName)
        //Publish station to a list of all stations created
        self.appDelegate.client.publish(["stationName" : stationName, "channelName" : channelName], toChannel: "All_Stations", withCompletion: { (status) in
            if status.error {
                self.showAlert("Error", error: "Network error")
            }
            self.appDelegate.client.subscribeToChannels([channelName], withPresence: true)
            dispatch_async(dispatch_get_main_queue(), {
                //Segue to the radio station
                let musicPlayerVC = self.storyboard?.instantiateViewControllerWithIdentifier("MusicPlayerViewController") as! MusicPlayerViewController
                musicPlayerVC.queue = self.queue
                musicPlayerVC.channelName = channelName
                self.navigationController?.pushViewController(musicPlayerVC, animated: true)
            })
          })
      } else {
          dispatch_async(dispatch_get_main_queue(), {
              self.showAlert("Try again", error: "Radio station name can't be empty or more than 60 characters")
          })
      }
   } else {
      dispatch_async(dispatch_get_main_queue(), {
          self.showAlert("Try again", error: "Playlist cannot be empty")
      })
   }
  }))
 self.presentViewController(alert, animated: true, completion: nil)
}
//Create unique PubNub channel by concatenating the current timestamp to the name of the radio station
func createValidPNChannel(channelName: String) -> String {
    let regex = try? NSRegularExpression(pattern: "[\\W]", options: .CaseInsensitive)
    var validChannelName = regex!.stringByReplacingMatchesInString(channelName, options: [], range: NSRange(0..<channelName.characters.count), withTemplate: "")
    validChannelName += "\(NSDate().timeIntervalSince1970)"
    validChannelName = validChannelName.stringByReplacingOccurrencesOfString(".", withString: "")
    return validChannelName
}

 

Selecting a song and adding it to a radio station

 

DJ the Radio Station

Now that the user has their own radio station, the tracks they added to their queue will begin to play. With PubNub’s Presence feature, we can detect when a user has joined our channel. Once they do, we will send out the track data and current playback time so they can listen at the same playback position on their device.

//Listen if a user joins and and publish the trackId, currentPlaybackTime, trackName and artistName to the current channel
func client(client: PubNub, didReceivePresenceEvent event: PNPresenceEventResult) {
    var playbackTime: Double!
    if controller.currentPlaybackTime.isNaN || controller.currentPlaybackTime.isInfinite {
        playbackTime = 0.0
    } else {
        playbackTime = controller.currentPlaybackTime
    }
    if event.data.presenceEvent == "join" {
        appDelegate.client.publish(["trackId" : trackIds[controller.indexOfNowPlayingItem], "currentPlaybackTime" : playbackTime, "trackName" : queue[controller.indexOfNowPlayingItem].trackName!, "artistName" : queue[controller.indexOfNowPlayingItem].artistName!], toChannel:  channelName, withCompletion: { (status) in
            if status.error {
                self.showAlert("Error", error: "Network error")
            }
        })
    }
}

 

If the DJ skips forwards or backwards, we’ll publish a message on the channel with the track data and current playback time again.

//Skip to the next track and publish the trackId, currentPlaybackTime, trackName and artistName to the current channel
    @IBAction func skipForwards(sender: AnyObject) {
        controller.skipToNextItem()
        if controller.indexOfNowPlayingItem < queue.count {
        trackName.text = queue[controller.indexOfNowPlayingItem].trackName
        artistName.text = queue[controller.indexOfNowPlayingItem].artistName
        appDelegate.client.publish(["trackId" : trackIds[controller.indexOfNowPlayingItem], "currentPlaybackTime" : controller.currentPlaybackTime, "trackName" : queue[controller.indexOfNowPlayingItem].trackName!, "artistName" : queue[controller.indexOfNowPlayingItem].artistName!], toChannel: channelName, withCompletion: { (status) in
            if !status.error {
                self.controller.play()
                dispatch_async(dispatch_get_main_queue(), {
                    self.thumbsUpCount.text = "0"
                    self.thumbsDownCount.text = "0"
                })
            } else {
                self.showAlert("Error", error: "Network error")
            }
        })
        }
    }
    
    //Skip to the previous track and publish the trackId, currentPlaybackTime, trackName and artistName to the current channel
    @IBAction func skipBackwards(sender: AnyObject) {
        controller.skipToPreviousItem()
        if controller.indexOfNowPlayingItem < queue.count {
        trackName.text = queue[controller.indexOfNowPlayingItem].trackName
        artistName.text = queue[controller.indexOfNowPlayingItem].artistName
        appDelegate.client.publish(["trackId" : trackIds[controller.indexOfNowPlayingItem], "currentPlaybackTime" : controller.currentPlaybackTime, "trackName" : queue[controller.indexOfNowPlayingItem].trackName!, "artistName" : queue[controller.indexOfNowPlayingItem].artistName!], toChannel: channelName, withCompletion: { (status) in
            if !status.error {
                self.controller.play()
                dispatch_async(dispatch_get_main_queue(), {
                    self.thumbsUpCount.text = "0"
                    self.thumbsDownCount.text = "0"
                })
            } else {
                self.showAlert("Error", error: "Network error")
            }
        })
        }
    }

 

The DJ is also listening for up and down vote messages on this channel to know if the listeners like what is playing.

//Update thumbs up and thumbs down counts
    func client(client: PubNub, didReceiveMessage message: PNMessageResult) {
        if "thumbsUp" == message.data.message!["action"] as? String {
            let count = Int(thumbsUpCount.text!)
            thumbsUpCount.text = String(count! + 1)
        } else if "thumbsDown" == message.data.message!["action"] as? String {
            let count = Int(thumbsDownCount.text!)
            thumbsDownCount.text = String(count! + 1)
        }
    }

Broadcasting the radio station to all users listening in real time

 

Listen to a Radio Station

To listen to a radio station, a user chooses from a table view of radio stations and they automatically subscribe to the channel from the cell they selected. In order to get these radio stations, we use PubNub’s storage and playback feature to retrieve all of the radio stations that have been created.

override func viewDidAppear(animated: Bool) {
        stationNames.removeAll()
        channelNames.removeAll()
        //Go through the history of the channel holding all stations created
        //Update table view with history list
        appDelegate.client.historyForChannel("All_Stations") { (result, status) in
            for message in (result?.data.messages)! {
                if let stationName = message["stationName"] as? String, channelName = message["channelName"] as? String{
                    self.stationNames.append(stationName)
                    self.channelNames.append(channelName)
                }
            }
            dispatch_async(dispatch_get_main_queue(), {
                self.tableView.reloadData()
            })
        }
    }

 

Subscribing to a radio station in real time
Once a user selects a cell, the channel name and station name is passed to the next view.

//Segue to that radio station and pass the channel name and station name
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        let cell = tableView.cellForRowAtIndexPath(indexPath)
        let stationVC = self.storyboard?.instantiateViewControllerWithIdentifier("StationViewController") as! StationViewController
        stationVC.channelName = (cell?.detailTextLabel?.text)!
        stationVC.stationName = (cell?.textLabel?.text)!
        self.navigationController?.pushViewController(stationVC, animated: true)
    }

Now the user can subscribe to that channel with just one line of code.

override func viewDidAppear(animated: Bool) {
        appDelegate.client.addListener(self)
        appDelegate.client.subscribeToChannels([channelName], withPresence: true)
        self.title = "Radio station - \(stationName)"
    }

 

The user is also listening for messages on this channel with the addListener() function in viewDidAppear() above . As explained before, the DJ will send a message to whoever joins the channel. The user listening to the radio station will then listen for the incoming song data.

//Recieve song data to play
    func client(client: PubNub, didReceiveMessage message: PNMessageResult) {
        if let trackId = message.data.message!["trackId"] as? String, currentPlaybackTime = message.data.message!["currentPlaybackTime"] as? Double, trackName = message.data.message!["trackName"] as? String, artistName = message.data.message!["artistName"] as? String {
            controller.setQueueWithStoreIDs([trackId])
            controller.play()
            controller.currentPlaybackTime = currentPlaybackTime
            self.trackName.text = trackName
            self.artistName.text = artistName
            thumbsDownButton.backgroundColor = UIColor.clearColor()
            thumbsUpButton.backgroundColor = UIColor.clearColor()
        }
    }

 

They can also send their upvotes and downvotes by simply publishing to the channel.

//Publish a upvote to the subscribed channel
    @IBAction func thumbsUp(sender: AnyObject) {
        appDelegate.client.publish(["action" : "thumbsUp"], toChannel: channelName) { (status) in
            if !status.error {
                self.thumbsDownButton.backgroundColor = UIColor.clearColor()
                self.thumbsUpButton.backgroundColor = UIColor(red: 44/255, green: 62/255, blue: 80/255, alpha: 1.0)
            } else {
                self.showAlert("Error", error: "Network error")
            }
        }
    }
    
    //Publish a downvote to the subscribed channel
    @IBAction func thumbsDown(sender: AnyObject) {
        appDelegate.client.publish(["action" : "thumbsDown"], toChannel: channelName) { (status) in
            if !status.error {
                self.thumbsUpButton.backgroundColor = UIColor.clearColor()
                self.thumbsDownButton.backgroundColor = UIColor(red: 44/255, green: 62/255, blue: 80/255, alpha: 1.0)
            } else {
                self.showAlert("Error", error: "Network error")
            }
        }
    }

 

Listening to a radio station in real time

 

Making It Even Better

That’s all there is to it! You are now able to become the DJ you’ve always wanted to be or see what other people are listening to and give your opinion on it. All in real time! You can easily expand on this by adding some extra features. You could restrict the range of your broadcasting with BLE (bluetooth low energy), provide stats on how well you’re doing as a DJ in relevance to the amount of upvotes and downvotes you get or even add a chat to it so listeners could talk to whoever is the DJ.

More From PubNub