iosmpmediaplayercontrollercontrol-center

How does Spotify customize the media playback controls on iOS?

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

Hamburger

The same thing is on the lock screen!

lock screen

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

Solution

  • 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

    enter image description here enter image description here