最近朋友想做个音乐App，让我帮忙参考下。其中歌词动态滚动的效果，正好我之前也没做过，顺便学习一下，先来个预览效果。
实现思路
歌词常见的就是lrc歌词了，我们这里也是通过解析lrc歌词文件来获取其播放参数，以实现和播放器协同。下面是我从百度音乐获取的歌词文件示例：
[ti:冰雨]
[ar:刘德华]
[al:笨小孩]
[:0.05]冰雨
[:0.94]作词：刘德华、李密 作曲：潘协庆
[:01.23]演唱：刘德华 [:01.37]
[:04.79]（歌手独白）
[:17.18]我是在等待 一个女孩
[:25.18]还是在等待沉沦苦海
[:32.91]一个人静静发呆 没有人去管花谢花开
[:41.03]无法肯定的爱 左右摇摆
[:45.43]只好把心酸往深心里塞
[:49.61]我是在等待 你的回来
[:57.73]难道只换回一句活该
[:05.27]一个人静静发呆
[:09.18]两个人却有不同无奈
[:13.15]好好的一份爱 啊怎么会慢慢变坏
[:18.43]
[:20.44]冷冷的冰雨在脸上胡乱的拍
[:24.31]暖暖的眼泪跟寒雨混成一块
[:28.32]眼前的色彩忽然被掩盖
[:32.28]你的影子无情在身边徘徊
[:36.30]你就像一个刽子手把我出卖
[:40.35]我的心彷佛被剌刀狠狠地宰
[:44.36]在悬崖上的爱 谁会愿意接受最痛的意外
[:51.09]
[:26.59]我是在等待你的回来
[:35.52]难道只换回一句活该
[:42.99]一个人静静发呆
[:46.99]两个人却有不同无奈
[:51.08]好好的一份爱 啊怎么会慢慢变坏
[:56.42]
[:58.54]冷冷的冰雨在脸上胡乱的拍
[:02.41]暖暖的眼泪跟寒雨混成一块
[:06.39]眼前的色彩忽然被掩盖
[:10.31]你的影子无情在身边徘徊
[:14.23]你就像一个刽子手把我出卖
[:18.34]我的心彷佛被剌刀狠狠地宰
[:22.33]在悬崖上的爱 谁会愿意接受最痛的意外
[:28.66]
[:34.57]冷冷的冰雨在脸上胡乱的拍
[:38.33]暖暖的眼泪跟寒雨混成一块
[:42.31]眼前的色彩忽然被掩盖
[:46.32]你的影子无情在身边徘徊
[:50.27]你就像一个刽子手把我出卖
[:54.34]我的心彷佛被剌刀狠狠地宰
[:58.34]悬崖上的爱 谁会敢去采
[:02.37]还是愿意接受最痛的意外 最爱的女孩
[:08.85]
[:19.72]悬崖上的爱 谁会敢去采
[:31.84]还是愿意接受最痛的意外 最爱的女孩
[:51.75]
[:10.60]歌手独白
[:16.76]
解析lrc歌词
这可能是最常见的格式了，每行为一句歌词，［］括号内为歌词对应的时间区间，所以我们首先要做的事情就是将他们提取分离出来，分别作为时间参数数组和歌词内容数组。这里我参考了一些博客的方法，解析lrc文件的代码如下：
#import <Foundation/Foundation.h> @interface LrcParser : NSObject //时间
@property (nonatomic,strong) NSMutableArray *timerArray;
//歌词
@property (nonatomic,strong) NSMutableArray *wordArray; //解析歌词
-(void) parseLrc;
//解析歌词
-(void) parseLrc:(NSString*)lrc;
@end
实现代码
@implementation LrcParser
-(instancetype) init{
self=[super init];
if(self!=nil){
self.timerArray=[[NSMutableArray alloc] init];
self.wordArray=[[NSMutableArray alloc] init];
}
return self;
}
-(NSString *)getLrcFile:(NSString *)lrc{
NSString* filePath=[[NSBundle mainBundle] pathForResource:lrc ofType:@"lrc"];
return [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
}
//测试示例
-(void)parseLrc{
[self parseLrc:[self getLrcFile:@"冰雨"]];
}
-(void)parseLrc:(NSString *)lrc{
NSLog(@"%@",lrc);
if(![lrc isEqual:nil]){
NSArray *sepArray=[lrc componentsSeparatedByString:@"["];
NSArray *lineArray=[[NSArray alloc] init];
for(int i=;i<sepArray.count;i++){
if([sepArray[i] length]>){
lineArray=[sepArray[i] componentsSeparatedByString:@"]"];
if(![lineArray[] isEqualToString:@"\n"]){
[self.timerArray addObject:lineArray[]];
[self.wordArray addObject:lineArray.count>?lineArray[]:@""];
}
}
}
}
}
@end
经过测试，可以将歌词顺利解析出来，下面我们要将获得歌词数据应用于控制器。
实现动态歌词页面
看了QQ音乐的滚动歌词页面后，可以知道是借助UITableView或者UIScrollView来实现的，这里我们采用UITableView来实现动态歌词界面。
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
//歌词TableView代理
self.lrcTable.delegate=self;
self.lrcTable.dataSource=self;
//解析歌词
self.lrcContent=[[LrcParser alloc] init];
[self.lrcContent parseLrc];
[self.lrcTable reloadData];
//初始化播放器
[self initPlayer];
//监听播放器状态
[NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(updateTime) userInfo:nil repeats:YES];
//载入歌词背景
UIImage *img=[UIImage imageNamed:@"wall1.jpg"];
UIImageView *bgView=[[UIImageView alloc] initWithImage:[self getBlurredImage:img]];
self.lrcTable.backgroundView=bgView;
}
//cell委托
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell *cell=[self.lrcTable dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
cell.textLabel.text=self.lrcContent.wordArray[indexPath.row];
if(indexPath.row==_currentRow)
cell.textLabel.textColor = [UIColor redColor];
else
cell.textLabel.textColor = [UIColor whiteColor];
cell.textLabel.textAlignment = NSTextAlignmentCenter;
cell.textLabel.font = [UIFont systemFontOfSize:];
cell.backgroundColor=[UIColor clearColor];
return cell;
}
这里歌词列表的背景我采用了高斯模糊的图片，高斯模糊的方法如下：
//实现高斯模糊
-(UIImage *)getBlurredImage:(UIImage *)image{
CIContext *context = [CIContext contextWithOptions:nil];
CIImage *ciImage=[CIImage imageWithCGImage:image.CGImage];
CIFilter *filter=[CIFilter filterWithName:@"CIGaussianBlur"];
[filter setValue:ciImage forKey:kCIInputImageKey];
[filter setValue:@5.0f forKey:@"inputRadius"];
CIImage *result=[filter valueForKey:kCIOutputImageKey];
CGImageRef ref=[context createCGImage:result fromRect:[result extent]];
return [UIImage imageWithCGImage:ref];
}
播放器则采用AVPlayer，其定义和初始化设置如下：
@interface ViewController : UIViewController<UITableViewDataSource,UITableViewDelegate> @property (nonatomic,strong) AVAudioPlayer *player; @end
-(void) initPlayer{
AVAudioSession *session=[AVAudioSession sharedInstance];
[session setActive:YES error:nil];
[session setCategory:AVAudioSessionCategoryPlayback error:nil];
[[UIApplication sharedApplication] beginReceivingRemoteControlEvents];
self.player=[[AVAudioPlayer alloc] initWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"冰雨" withExtension:@"mp3"] error:nil];
//单曲循环
self.player.numberOfLoops=;
[self.player prepareToPlay];
[self.player play];
}
这样就为应用定义了一个音乐播放器，下面要监听播放器的时间参数，来载入对应的歌词，如下：
[NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(updateTime) userInfo:nil repeats:YES];
根据时间更新UI
-(void) updateTime{
CGFloat currentTime=self.player.currentTime;
NSLog(@"%d:%d",(int)currentTime / , (int)currentTime % );
for (int i=; i<self.lrcContent.timerArray.count; i++) {
NSArray *timeArray=[self.lrcContent.timerArray[i] componentsSeparatedByString:@":"];
float lrcTime=[timeArray[] intValue]*+[timeArray[] floatValue];
if(currentTime>lrcTime){
_currentRow=i;
}else
break;
}
[self.lrcTable reloadData];
[self.lrcTable scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:_currentRow inSection:] atScrollPosition:UITableViewScrollPositionMiddle animated:YES];
}
最后编译运行，就会发现一个滚动歌词播放器就实现啦。