美文网首页ios 音视频播放相关全栈工程师自鉴
iOS 音乐播放器之锁屏歌词+歌词解析+锁屏效果

iOS 音乐播放器之锁屏歌词+歌词解析+锁屏效果

作者: 且行且珍惜_iOS | 来源:发表于2017-06-07 15:18 被阅读4328次

功能描述:锁屏歌曲信息、控制台远程控制音乐播放:暂停/播放、上一首/下一首、快进/快退、锁屏状态下列表菜单弹框和拖拽控制台的进度条调节进度(结合了QQ音乐和网易云音乐在锁屏状态下的效果)、歌词解析并随音乐滚动显示。

总效果预览图.gif

第一部分:锁屏效果包括:锁屏歌曲信息和远程控制音乐播放

① 锁屏歌曲信息显示

iOS11以下锁屏信息预览
//展示锁屏歌曲信息:图片、歌词、进度、歌曲名、演唱者、专辑、(歌词是绘制在图片上的)
- (void)showLockScreenTotaltime:(float)totalTime andCurrentTime:(float)currentTime andLyricsPoster:(BOOL)isShow{
    
    NSMutableDictionary * songDict = [[NSMutableDictionary alloc] init];
    //设置歌曲题目
    [songDict setObject:@"多幸运" forKey:MPMediaItemPropertyTitle];
    //设置歌手名
    [songDict setObject:@"韩安旭" forKey:MPMediaItemPropertyArtist];
    //设置专辑名
    [songDict setObject:@"专辑名" forKey:MPMediaItemPropertyAlbumTitle];
    //设置歌曲时长
    [songDict setObject:[NSNumber numberWithDouble:totalTime]  forKey:MPMediaItemPropertyPlaybackDuration];
    //设置已经播放时长
    [songDict setObject:[NSNumber numberWithDouble:currentTime] forKey:MPNowPlayingInfoPropertyElapsedPlaybackTime];
    
    UIImage * lrcImage = [UIImage imageNamed:@"backgroundImage5.jpg"];
    if (isShow) {
        
        //制作带歌词的海报
        if (!_lrcImageView) {
            _lrcImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 480,800)];
        }
        if (!_lockScreenTableView) {
            _lockScreenTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 800 - 44 * 7 + 20, 480, 44 * 3) style:UITableViewStyleGrouped];
            _lockScreenTableView.dataSource = self;
            _lockScreenTableView.delegate = self;
            _lockScreenTableView.separatorStyle = NO;
            _lockScreenTableView.backgroundColor = [UIColor clearColor];
            [_lockScreenTableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cellID"];
        }
        //主要为了把歌词绘制到图片上,已达到更新歌词的目的
        [_lrcImageView addSubview:self.lockScreenTableView];
        _lrcImageView.image = lrcImage;
        _lrcImageView.backgroundColor = [UIColor blackColor];
        
        //获取添加了歌词数据的海报图片
        UIGraphicsBeginImageContextWithOptions(_lrcImageView.frame.size, NO, 0.0);
        CGContextRef context = UIGraphicsGetCurrentContext();
        [_lrcImageView.layer renderInContext:context];
        lrcImage = UIGraphicsGetImageFromCurrentImageContext();
        _lastImage = lrcImage;
        UIGraphicsEndImageContext();
        
    }else{
        if (_lastImage) {
            lrcImage = _lastImage;
        }
    }
    //设置显示的海报图片
    [songDict setObject:[[MPMediaItemArtwork alloc] initWithImage:lrcImage]
                 forKey:MPMediaItemPropertyArtwork];
   //加入正在播放媒体的信息中心
    [[MPNowPlayingInfoCenter defaultCenter] setNowPlayingInfo:songDict];
    
}


② 远程控制音乐播放

左侧列表菜单弹出框.PNG

在此之前需先满足后台播放音乐的条件:

    //后台播放音频设置,需要在Capabilities->Background Modes中勾选Audio,Airplay,and Picture in Picture ,如下图1、2
    AVAudioSession *session = [AVAudioSession sharedInstance];
    [session setActive:YES error:nil];
    [session setCategory:AVAudioSessionCategoryPlayback error:nil];
1.png 2.png
  • 在iOS7.1之前, App如果需要在锁屏界面开启和监控远程控制事件,可以通过重写- (void)remoteControlReceivedWithEvent:(UIEvent *)event这个方法来捕获远程控制事件,并根据event.subtype来判别指令意图并作出反应。具体用法如下:
//在具体的控制器或其它类中捕获处理远程控制事件,当远程控制事件发生时触发该方法, 该方法属于UIResponder类,iOS 7.1 之前经常用
- (void)remoteControlReceivedWithEvent:(UIEvent *)event{
    NSLog(@"%ld",event.type);
    [[NSNotificationCenter defaultCenter] postNotificationName:@"songRemoteControlNotification" object:self userInfo:@{@"eventSubtype":@(event.subtype)}];
}

 /* iOS 7.1之前*/
     //让App开始接收远程控制事件, 该方法属于UIApplication类
     [[UIApplication sharedApplication] beginReceivingRemoteControlEvents];
     //结束远程控制,需要的时候关闭
     //     [[UIApplication sharedApplication] endReceivingRemoteControlEvents];
     //处理控制台的暂停/播放、上/下一首事件
     [[NSNotificationCenter defaultCenter] addObserverForName:@"songRemoteControlNotification" object:nil queue:[NSOperationQueue mainQueue] usingBlock:^(NSNotification *notification) {
     
     NSInteger  eventSubtype = [notification.userInfo[@"eventSubtype"] integerValue];
     switch (eventSubtype) {
     case UIEventSubtypeRemoteControlNextTrack:
     NSLog(@"下一首");
     break;
     case UIEventSubtypeRemoteControlPreviousTrack:
     NSLog(@"上一首");
     break;
     case  UIEventSubtypeRemoteControlPause:
     [self.player pause];
     break;
     case  UIEventSubtypeRemoteControlPlay:
     [self.player play];
     break;
     //耳机上的播放暂停
     case  UIEventSubtypeRemoteControlTogglePlayPause:
     NSLog(@"播放或暂停");
     break;
     //后退
     case UIEventSubtypeRemoteControlBeginSeekingBackward:
     break;
     case UIEventSubtypeRemoteControlEndSeekingBackward:
     NSLog(@"后退");
     break;
     //快进
     case UIEventSubtypeRemoteControlBeginSeekingForward:
     break;
     case UIEventSubtypeRemoteControlEndSeekingForward:
     NSLog(@"前进");
     break;
     default:
     break;
     }
     
     }];

  • 在iOS7.1之后,出现了MPRemoteCommandCenter、MPRemoteCommand 及其相关的一些类 ,锁屏界面开启和监控远程控制事件就更方便了,而且还扩展了一些新功能:网易云音乐的列表菜单弹框功能和QQ音乐的拖拽控制台的进度条调节进度功能等等.....
    官方文档:https://developer.apple.com/documentation/mediaplayer/mpremotecommandcenter
//锁屏界面开启和监控远程控制事件
- (void)createRemoteCommandCenter{
    /**/
    //远程控制命令中心 iOS 7.1 之后  详情看官方文档:https://developer.apple.com/documentation/mediaplayer/mpremotecommandcenter
    
    MPRemoteCommandCenter *commandCenter = [MPRemoteCommandCenter sharedCommandCenter];
    
    //   MPFeedbackCommand对象反映了当前App所播放的反馈状态. MPRemoteCommandCenter对象提供feedback对象用于对媒体文件进行喜欢, 不喜欢, 标记的操作. 效果类似于网易云音乐锁屏时的效果
    
    //添加喜欢按钮
    MPFeedbackCommand *likeCommand = commandCenter.likeCommand;
    likeCommand.enabled = YES;
    likeCommand.localizedTitle = @"喜欢";
    [likeCommand addTargetWithHandler:^MPRemoteCommandHandlerStatus(MPRemoteCommandEvent * _Nonnull event) {
        NSLog(@"喜欢");
        return MPRemoteCommandHandlerStatusSuccess;
    }];
    //添加不喜欢按钮,假装是“上一首”
    MPFeedbackCommand *dislikeCommand = commandCenter.dislikeCommand;
    dislikeCommand.enabled = YES;
    dislikeCommand.localizedTitle = @"上一首";
    [dislikeCommand addTargetWithHandler:^MPRemoteCommandHandlerStatus(MPRemoteCommandEvent * _Nonnull event) {
        NSLog(@"上一首");
        return MPRemoteCommandHandlerStatusSuccess;
    }];
    //标记
    MPFeedbackCommand *bookmarkCommand = commandCenter.bookmarkCommand;
    bookmarkCommand.enabled = YES;
    bookmarkCommand.localizedTitle = @"标记";
    [bookmarkCommand addTargetWithHandler:^MPRemoteCommandHandlerStatus(MPRemoteCommandEvent * _Nonnull event) {
        NSLog(@"标记");
        return MPRemoteCommandHandlerStatusSuccess;
    }];
    
//    commandCenter.togglePlayPauseCommand 耳机线控的暂停/播放
    
    [commandCenter.pauseCommand addTargetWithHandler:^MPRemoteCommandHandlerStatus(MPRemoteCommandEvent * _Nonnull event) {
        [self.player pause];
        return MPRemoteCommandHandlerStatusSuccess;
    }];
    [commandCenter.playCommand addTargetWithHandler:^MPRemoteCommandHandlerStatus(MPRemoteCommandEvent * _Nonnull event) {
        [self.player play];
        return MPRemoteCommandHandlerStatusSuccess;
    }];
    //    [commandCenter.previousTrackCommand addTargetWithHandler:^MPRemoteCommandHandlerStatus(MPRemoteCommandEvent * _Nonnull event) {
    //        NSLog(@"上一首");
    //        return MPRemoteCommandHandlerStatusSuccess;
    //    }];
    
    [commandCenter.nextTrackCommand addTargetWithHandler:^MPRemoteCommandHandlerStatus(MPRemoteCommandEvent * _Nonnull event) {
        NSLog(@"下一首");
        return MPRemoteCommandHandlerStatusSuccess;
    }];
    
    //快进
    //    MPSkipIntervalCommand *skipBackwardIntervalCommand = commandCenter.skipForwardCommand;
    //    skipBackwardIntervalCommand.preferredIntervals = @[@(54)];
    //    skipBackwardIntervalCommand.enabled = YES;
    //    [skipBackwardIntervalCommand addTarget:self action:@selector(skipBackwardEvent:)];
    
    //在控制台拖动进度条调节进度(仿QQ音乐的效果)
    [commandCenter.changePlaybackPositionCommand addTargetWithHandler:^MPRemoteCommandHandlerStatus(MPRemoteCommandEvent * _Nonnull event) {
        CMTime totlaTime = self.player.currentItem.duration;
        MPChangePlaybackPositionCommandEvent * playbackPositionEvent = (MPChangePlaybackPositionCommandEvent *)event;
        [self.player seekToTime:CMTimeMake(totlaTime.value*playbackPositionEvent.positionTime/CMTimeGetSeconds(totlaTime), totlaTime.timescale) completionHandler:^(BOOL finished) {
        }];
        return MPRemoteCommandHandlerStatusSuccess;
    }];

    
}

-(void)skipBackwardEvent: (MPSkipIntervalCommandEvent *)skipEvent
{
    NSLog(@"快进了 %f秒", skipEvent.interval);
}

第二部分:歌词解析

歌词样式.png
  • 根据上图的歌词样式,思路就是:先根据换行符“\n“分割字符串,获得包含每一行歌词字符串的数组,然后解析每一行歌词字符,获得时间点和对应的歌词,再用创建的歌词对象wslLrcEach来存储时间点和歌词,最后得到一个存储wslLrcEach对象的数组。
//每句歌词对象
@interface wslLrcEach : NSObject
@property(nonatomic, assign) NSUInteger time ;
@property(nonatomic, copy) NSString * lrc ;
@end

接下来就是要让歌词随歌曲的进度来滚动显示,主要代码如下:

        self.tableView  显示歌词的
        currentTime  当前播放时间点
        self.currentRow  当前时间点歌词的位置

         //歌词滚动显示
            for ( int i = (int)(self.lrcArray.count - 1); i >= 0 ;i--) {
                wslLrcEach * lrc = self.lrcArray[i];
                if (lrc.time < currentTime) {
                    self.currentRow = i;
                    [self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow: self.currentRow inSection:0] atScrollPosition:UITableViewScrollPositionMiddle animated:YES];
                    [self.tableView reloadData];
                    break;
                }
            }

好了,就说这么多了,demo中注释的还算是清楚的,感兴趣的可以去look look😀😀!
传送门,觉得有帮助的话,别忘了给个star⭐️哈😀😀!

  • 更新于2017/9/13 iOS11系统正式发布后 , iOS11上不能像iOS11以下那样锁屏歌词和海报,iOS11把海报显示位置放到了左上方,而且大小变成了头像大小,可能是苹果为了锁屏界面的简洁,只保留了如下图的界面。
iOS11网易云音乐锁屏界面.PNG
  • 更新于2018/3/7 上面提到 iOS11系统上 ,不能像以往那样显示锁屏歌词了,那锁屏歌词该怎么显示呢,网易云音乐给出了如下图的设计:她是把当前唱到的歌词放到了锁屏的副标题处,随着播放的进度而改变。
    [songDict setObject:@"当前歌词" forKey:MPMediaItemPropertyAlbumTitle];
网易云音乐锁屏歌词.PNG 亲,赞一下,给个star.gif

欢迎扫描下方二维码关注——iOS开发进阶之路——微信公众号:iOS2679114653
本公众号是一个iOS开发者们的分享,交流,学习平台,会不定时的发送技术干货,源码,也欢迎大家积极踊跃投稿,(择优上头条) _分享自己开发攻城的过程,心得,相互学习,共同进步,成为攻城狮中的翘楚!

iOS开发进阶之路.jpg

相关文章

网友评论

  • 冰三尺:楼主, 我遇到一个问题, 在锁屏状态下, 点击暂停按钮, 然后解锁, 进入App, App里面的音乐也是暂停的, 但是这是我点击App里面的播放按钮, 音乐开始播放, 但是没有声音, 这个是什么情况, 该怎么解决? 请问楼主有遇到过吗?
    冰三尺:@且行且珍惜_iOS 确定,因为我监听播放时间,时间是一直走的,音量也没问题,因为我换把音乐停掉,又重新播放,声音就有了。
    且行且珍惜_iOS:@后山顾主 我没遇到过这个问题
    且行且珍惜_iOS:@后山顾主 你确定点击播放后,音频正在播放吗?然后音量也没问题?
  • goodthing:demo在 iOS11.3上当应用开始播放的时候, airPlay中默认是暂停状态,锁屏状态下没有播放界面了;
    且行且珍惜_iOS:是的,,
  • unhangcorn:跑了下demo,发现个问题.锁屏下暂停播放,过几秒再继续播放,进度条会跳一下,暂停越久跳越猛
    且行且珍惜_iOS:@酷炫的我 已解决
    //设置播放速率
    //注意:MPNowPlayingInfoCenter的rate 与 self.player.rate 是不同步的,也就是说[self.player pause]暂停播放后的速率rate是0,但MPNowPlayingInfoCenter的rate还是1,就会造成 在锁屏界面点击了暂停按钮,这个时候进度条表面看起来停止了走动,但是其实还是在计时,所以再点击播放的时候,锁屏界面进度条的光标会发生位置闪动, 所以我们需要保持播放速率一致
    [songDict setObject:[NSNumber numberWithInteger:rate] forKey:MPNowPlayingInfoPropertyPlaybackRate];
    b8a07babf83e:@且行且珍惜_iOS 大神们解决了没 我项目里也出现了这个问题
    且行且珍惜_iOS:这是什么鬼?我瞅瞅
  • unhangcorn:简洁明了 非常感谢 好人一生平安
    且行且珍惜_iOS:@unhangcorn :😁😀谢谢
  • mamat:可能有些老了 代码憋了
    且行且珍惜_iOS:@gufs 哪一个描述的效果没有实现?我看看
    mamat:@且行且珍惜_iOS 允许没有达到描述的效果,然后自己写完了:relaxed:
    且行且珍惜_iOS:代码憋了?
  • Sam_xing:当我锁屏播放音频播放的时候,点击暂停后(此时会切换成播放按钮),在切换下一首歌曲.暂停按钮不能复原,进度条也不更新.请问一下,是否遇见过这个问题?怎么解决.?
    且行且珍惜_iOS:没遇到过这个问题,切换下一首,再执行播放操作试试,
  • 5c2ad94c9daf:iOS11锁屏状态下点击“喜欢”、“上一首”、“标记”这些MPFeedbackCommand都无法回调了,不知道什么原因,iOS9和iOS10是正常的。
    且行且珍惜_iOS:@zzy0129 可以呀,我这试了试,在iOS11上没有一点问题呀
    5c2ad94c9daf:@且行且珍惜_iOS 都试了,都不行,老大求助。
    且行且珍惜_iOS:[likeCommand addTarget:self action:@selector(skipBackwardEvent:)]; 或是 [likeCommand addTargetWithHandler:^MPRemoteCommandHandlerStatus(MPRemoteCommandEvent * _Nonnull event) {
    return MPRemoteCommandHandlerStatusSuccess;
    }];
    哪一个方法没用,你试一下另一个方法
  • 5c2ad94c9daf:请教一个问题,如果我正在播放当前的音乐,然后我跳转到QQ音乐之后随便播放一首歌再返回,我当前的歌曲是被暂停的状态,我这个暂停的状态是通过哪一个通知接收?
    5c2ad94c9daf:@且行且珍惜_iOS 感谢大神!
    且行且珍惜_iOS:这篇文章有介绍 https://blog.csdn.net/jeffasd/article/details/54948968
    且行且珍惜_iOS:@zzy0129 系统的一个通知,我稍晚些发给你哈:smile::smile:
  • 贪夢魔法学苑:请问: 你有办法 后台时 获取传感器的信息没呀?
    贪夢魔法学苑:@且行且珍惜_iOS 谢了,后面一句解决这个问题了~~
    且行且珍惜_iOS:@贪夢魔法学苑 什么传感器?
  • 刘英滕:可惜 iOS 11 没有锁屏封面了…
    且行且珍惜_iOS:@刘英滕 刚看了网易云音乐的解决办法,她把歌词放到了锁屏的副标题处展示
    刘英滕:@且行且珍惜_iOS 但也看不清字了
    且行且珍惜_iOS:只是封面变小了而已嘛,还是有滴,😁
  • 芷依儿:牛牛,我想实现锁屏下拖动进度条,音乐能从拖动后的位置开始播放的效果,(就是网易云那种锁屏拖进度的一样)具体我要用哪几个类呢?第一次做这种功能,求牛牛指点迷津…
    芷依儿:@且行且珍惜_iOS 控制中心跟锁屏状态下一样吗?我再看看文档~谢谢牛牛啦~
    且行且珍惜_iOS:这几个类的官方解读:https://developer.apple.com/documentation/mediaplayer/mpremotecommandcenter
    且行且珍惜_iOS:MPRemoteCommandCenter、MPRemoteCommand ,,,,
    //在控制台拖动进度条调节进度(仿QQ音乐的效果)
    [commandCenter.changePlaybackPositionCommand addTargetWithHandler:^MPRemoteCommandHandlerStatus(MPRemoteCommandEvent * _Nonnull event) {
    CMTime totlaTime = self.player.currentItem.duration;
    MPChangePlaybackPositionCommandEvent * playbackPositionEvent = (MPChangePlaybackPositionCommandEvent *)event;
    [self.player seekToTime:CMTimeMake(totlaTime.value*playbackPositionEvent.positionTime/CMTimeGetSeconds(totlaTime), totlaTime.timescale) completionHandler:^(BOOL finished) {
    }];
    return MPRemoteCommandHandlerStatusSuccess;
    }];
  • 一个很帅的蓝孩子:我也下载不了,能发我下吗?273038405@qq.com,谢谢
  • 囧囧囧囧囧囧囧:最后下载失败了,重下3次了,以前没出现过这样....
    囧囧囧囧囧囧囧:连接VPN下载下来了
  • 囧囧囧囧囧囧囧:兄弟,代码写的还可以,但是是不是假的github,下载其它的代码很快,下载你的一秒就20K...,怕是要继续躺着了
    且行且珍惜_iOS:@堂姐123 是吗?我自己下着没事啊,,因为有几首歌,总共16M,可能是有点大吧,,
  • Rumbles:请问锁屏之后 暂停 进度条还在走 怎么办呀。。。。
    且行且珍惜_iOS:@Rumbles 解决了,请查看最新Demo再试试
    Rumbles:@且行且珍惜_iOS 是的啊 ,我确定啊 ,我再找找什么原因
    且行且珍惜_iOS:@Rumbles 是锁屏的进度条吗?你确定你暂停成功了?
  • 天下只有一个:能发一份吗qq812257500 下载不了谢谢
  • 我是观察者: 请问你是妹子吗?一定是妹子吧!妹子技术好厉害:+1: :blush:
    一个很帅的蓝孩子:@我是观察者 别闹!程序员怎么可能会有女朋友呢 :joy:
    我是观察者:@且行且珍惜_iOS 哦哦,看个人介绍,原来你是男的啊,语言这么细腻我以为是姑娘呢!你女朋友漂亮吗?:blush:
    且行且珍惜_iOS:@我是观察者 你这个观察者观察的不够仔细啊,,:joy::joy::joy:
  • acc4d192d714:能把demo发我一下吗? QQ:1479383603
    acc4d192d714:@且行且珍惜_iOS 谢谢:smile:
    且行且珍惜_iOS:https://github.com/wslcmk/lyricsAnalysis.git
  • zhao1zhihui:学习了
  • c80f2c8a1147:1240095289@qq.com 请发给我 下载不了
    SongLazy:好没有礼貌的啊
    且行且珍惜_iOS:可以的啊,,,
  • Arise11:那你就继续躺着吧:smile: :smile: :smile: :smile:

本文标题:iOS 音乐播放器之锁屏歌词+歌词解析+锁屏效果

本文链接:https://www.haomeiwen.com/subject/qexkbttx.html