一.歌词同步显示的思路分析
思路分析及步骤:
第一步:要想显示歌词,首先必须完成对歌词数据的解析,解析出来以后要对数据进行处理,将时间和歌词分离放进数组中,并通过与时间对应获取当前歌词所在的下标位置.
第二步:将歌词与cell对应并显示出来
二.实现过程的重要过程及步骤.
对于步骤一的代码实现:
#import "MusicLyricHelper.h"
#import "LyricModel.h"
#import <UIKit/UIKit.h>
@interface MusicLyricHelper ()
//存放所有歌词对象的数组
@property(nonatomic,strong)NSMutableArray *allLyricModelsArray;
@end
@implementation MusicLyricHelper
#pragma mark--获取歌词工具类对象
+(instancetype)shareMusicLyricHelper
{
static MusicLyricHelper *helper = nil;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
helper =[[MusicLyricHelper alloc] init];
});
return helper;
}
#pragma mark ---解析歌词并封装成model对象
-(void)parseLyricWithLyricString:(NSString *)lyricString
{
//当切换新歌时,将数组中原来的歌词对象清空
[self.allLyricModelsArray removeAllObjects];
NSLog(@"%@",lyricString);
//将字符串切割成数组 componentsSeparatedByString
NSArray *array = [lyricString componentsSeparatedByString:@"
"];
NSLog(@"%@",array);
for (NSString *string in array) {
//将字符串切割成数组
NSArray *timeStrAndLyricStr = [string componentsSeparatedByString:@"]"];
NSLog(@"%@",timeStrAndLyricStr);
if ([timeStrAndLyricStr.firstObject length] == 0) {
continue;
}
//截取时间部分字符串 "[04:16.530"
NSString *str = timeStrAndLyricStr.firstObject;
//从第几个字符串时开始截取
NSString *timeStr = [str substringFromIndex:1];
//将字符串切割成数组 两部分--> 03, "20.760"
NSArray *timeArray = [timeStr componentsSeparatedByString:@":"];
NSLog(@"%@",timeArray);
//计算秒数 计算歌词对应的歌曲时间
NSTimeInterval second = [timeArray.firstObject doubleValue]*60 + [timeArray.lastObject doubleValue];
//每一句歌词 获取每一行的歌词
NSString *lyricStr = [timeStrAndLyricStr lastObject];
//封装model对象
LyricModel *lyric = [[LyricModel alloc] initWithTime:second lyricString:lyricStr];
[self.allLyricModelsArray addObject:lyric];
}
}
//使用懒加载创建并初始化数组 用self.来调用
-(NSMutableArray *)allLyricModelsArray
{
if (!_allLyricModelsArray) {
_allLyricModelsArray = [NSMutableArray array];
}
return _allLyricModelsArray;
}
-(NSInteger)count
{
return _allLyricModelsArray.count;
}
#pragma mark ---根据传过来的indexpath获取model对象
-(LyricModel *)lyricWithIndeapath:(NSIndexPath *)indexPath
{
return _allLyricModelsArray[indexPath.row];
}
#pragma mark ---根据时间获取下标
-(NSInteger)getIndexWithTime:(NSTimeInterval)time
{
NSInteger index = 0;
for (int i = 0 ; i<self.count; i++) {
LyricModel *lyric = _allLyricModelsArray[i];
//发现一个满足条件的就break
if (lyric.time > time) {
index = (i-1 >0)?i-1:0;
break;
}
}
return index;
}
@end
对于步骤二的实现:
开始准备歌词,并刷新tableView
#pragma mark --开始准备歌词
[KmusicLyricHelper parseLyricWithLyricString:currentmusic.lyric];
//刷新歌词表视图
[self.lyricTableView reloadData];
在哪一行显示歌词
//歌词的实现代码---------------------------------------------------------
//根据下标显示哪一行的歌词
NSInteger index = [KmusicLyricHelper getIndexWithTime:time];
//选中哪一行
NSIndexPath *indexPath1 = [NSIndexPath indexPathForItem:index inSection:0];
[self.lyricTableView selectRowAtIndexPath:indexPath1 animated:YES scrollPosition:UITableViewScrollPositionMiddle];
滑块点击事件的方法
//时间滑动轴的点击事件方法
- (IBAction)didClickTimeSlider:(UISlider *)sender {
NSLog(@"%f",_timeSlider.value);
[KMusicPlayHelper seekToPlayWithTime:_timeSlider.value];
}
//音量滑动轴的点击事件方法
- (IBAction)didClickVolumeSlider:(UISlider *)sender {
KMusicPlayHelper.volume = sender.value;
}
对于cell代理方法的实现及往cell中添加数据
#pragma mark ---实现协议方法
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return KmusicLyricHelper.count;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"lyricCell" forIndexPath:indexPath];
cell.textLabel.text = [KmusicLyricHelper lyricWithIndeapath:indexPath].lyricString;
//清空cell的背景色
cell.backgroundColor = [UIColor clearColor];
//取消选中样式
// cell.selectionStyle = UITableViewCellSelectionStyleNone;
//设置cell高亮状态的文字颜色
cell.textLabel.highlightedTextColor = [UIColor colorWithRed:1.0 green:0 blue:0 alpha:1];
cell.backgroundView = [[UIView alloc] init];
//选中状态下的背景设为空(就是点击cell时的灰色清空)
cell.selectedBackgroundView = [[UIView alloc] init];
// cell.textLabel.font = [UIFont systemFontOfSize:22];
//文本居中
cell.textLabel.textAlignment = NSTextAlignmentCenter;
return cell;
}