How does Spotify customize the media playback controls on iOS?

Question

Spotify on iOS has a very interesting Control Center integration. Notice the hamburger button below.

The same thing is on the lock screen!

How do they do those? Is there an API in MPMediaCenter or something?

Stop

Answer 1

Yes, there is an API for that

Looking at the instructions found in the apple docs regarding remote control events you get two classes MPRemoteCommand and MPRemoteCommandCenter highlighted. Looking up MPRemoteCommandCenter will show you there are a multitude of commands like likeCommand or dislikeCommand you can add handlers for. Adding handlers to those commands causes them beeing displayed in the control center.

Below is some all-in-one code achieving pretty much exactly the same results shown on your screenshots:

- (void)showCustomizedControlCenter {
    /* basic audio initialization */
    NSString *soundFilePath = [NSString stringWithFormat:@"%@/test.mp3", [[NSBundle mainBundle] resourcePath]];
    NSURL *soundFileURL = [NSURL fileURLWithPath:soundFilePath];

    self.player = [[AVAudioPlayer alloc] initWithContentsOfURL:soundFileURL error:nil];
    self.player.numberOfLoops = -1;
    [self.player play];

    /* registering as global audio playback */
    [[AVAudioSession sharedInstance] setActive:YES error:nil];
    [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error:nil];

    /* the cool control center registration */
    MPRemoteCommandCenter *commandCenter = [MPRemoteCommandCenter sharedCommandCenter];
    [commandCenter.playCommand addTargetWithHandler:^MPRemoteCommandHandlerStatus(MPRemoteCommandEvent *event) {
        return MPRemoteCommandHandlerStatusSuccess;
    }];
    [commandCenter.dislikeCommand addTargetWithHandler:^MPRemoteCommandHandlerStatus(MPRemoteCommandEvent *event) {
        return MPRemoteCommandHandlerStatusSuccess;
    }];
    [commandCenter.likeCommand addTargetWithHandler:^MPRemoteCommandHandlerStatus(MPRemoteCommandEvent *event) {
        return MPRemoteCommandHandlerStatusSuccess;
    }];
    [commandCenter.nextTrackCommand addTargetWithHandler:^MPRemoteCommandHandlerStatus(MPRemoteCommandEvent *event) {
        return MPRemoteCommandHandlerStatusSuccess;
    }];

    /* setting the track title, album title and button texts to match the screenshot */ 
    commandCenter.likeCommand.localizedTitle = @"Thumb Up";
    commandCenter.dislikeCommand.localizedTitle = @"Thumb down";

    MPNowPlayingInfoCenter* info = [MPNowPlayingInfoCenter defaultCenter];
    NSMutableDictionary* newInfo = [NSMutableDictionary dictionary];

    [newInfo setObject:@"Mixtape" forKey:MPMediaItemPropertyTitle];
    [newInfo setObject:@"Jamie Cullum" forKey:MPMediaItemPropertyArtist];

    info.nowPlayingInfo = newInfo;
}

In addition to writing the code you need to

• add AVFoundation to your project
• #import <AVFoundation/AVFoundation.h> and #import <MediaPlayer/MediaPlayer.h>
• activate the Background Modes "Audio and AirPlay" in the app settings.

Psychopathist