歌詞.gif

服務器返回給你的是帶時間的歌詞，這里我們需要將每一句轉換成歌詞模型, 沒一句歌詞放在tableView中， 每一句的歌詞填充需要自己畫label，根據這首歌的播放位置除以這句歌的總時間

demo源地址
https://github.com/liangxingyan/QQMusic.git

• 將每一句歌詞轉成模型

+ (NSArray *)lyricToolWithLrcname:(NSString *)lrc {
    
    
    // 拿到歌詞的數組
    NSArray *lrcArray = [lrc componentsSeparatedByString:@"\n"];
    
    NSMutableArray *tempArray = [NSMutableArray array];
    
    // 遍歷歌詞轉換模型
    for (NSString *lrcStr in lrcArray) {
        // 過濾
        
        if (![lrcStr hasPrefix:@"["]) {
            continue;
        }
        
        LXYLrc *lxylrc = [[LXYLrc alloc] initWithLrcString:lrcStr];
        
        [tempArray addObject:lxylrc];
    }
    return tempArray;
}

• 歌詞視圖

#import "LrcView.h"
#import "Masonry.h"
#import "LyricTool.h"
#import "LXYLrc.h"
#import "Masonry.h"
#import "LrcTableViewCell.h"
#import "LXYLrcLabel.h"

@interface LrcView () <UITableViewDataSource>

/** 表視圖 */
@property (nonatomic, weak) UITableView *tableView;
/** 歌詞 */
@property (nonatomic, strong) NSArray *lyrices;
/** 當前播放的下標值 */
@property (nonatomic, assign) NSInteger currentIndex;
@end

@implementation LrcView

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self setupTableView];
    }
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    if (self = [super initWithCoder:aDecoder]) {
        [self setupTableView];
    }
    return self;
}

- (void)setupTableView {
 
    // 創建tableview
    UITableView *tableView = [[UITableView alloc] init];
    [self addSubview:tableView];
    tableView.backgroundColor = [UIColor clearColor];
    tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    tableView.rowHeight = 40;
    tableView.translatesAutoresizingMaskIntoConstraints = NO;
    tableView.dataSource = self;
    self.tableView = tableView;
    
}

- (void)layoutSubviews {
    [super layoutSubviews];
    
    [self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.mas_top);
        make.bottom.equalTo(self.mas_bottom);
        make.height.equalTo(self.mas_height);
        make.left.equalTo(self.mas_left).offset(self.bounds.size.width);
        make.right.equalTo(self.mas_right);
        make.width.equalTo(self.mas_width);
    }];
    
    // 設置tableview的多出的區域
    self.tableView.contentInset = UIEdgeInsetsMake(self.bounds.size.height * 0.5, 0, self.bounds.size.height * 0.5, 0);
}

#pragma mark - UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
 
    return self.lyrices.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    
    LrcTableViewCell *cell = [LrcTableViewCell lrcCellWithTableView:tableView];
    
    if (self.currentIndex == indexPath.row) {
        cell.lrcLabel.font = [UIFont systemFontOfSize:15];
    } else {
        cell.lrcLabel.font = [UIFont systemFontOfSize:12];
        cell.lrcLabel.progress = 0;
    }
    
    LXYLrc *lrc = self.lyrices[indexPath.row];
    cell.lrcLabel.text = lrc.content;
    return cell;

}

#pragma mark - 重寫set方法
- (void)setLyric:(NSString *)lyric {
    
    // 下一首歌不會出現上一首歌的殘留下標
    self.currentIndex = 0;
    
    // 下一首歌不會出現上一首歌的殘留歌詞
    self.lrcLabel.text = @"";
    
    _lyric = lyric;
    
    // 解析歌詞
    self.lyrices = [LyricTool lyricToolWithLrcname:lyric];
    
    // 刷新表格
    [self.tableView reloadData];
    
}

- (void)setCurrentTime:(NSTimeInterval)currentTime {
    _currentTime = currentTime;
    
    NSInteger count = self.lyrices.count;
    for (int i = 0; i < count; i++) {
        LXYLrc *currentLrc = self.lyrices[i];
        NSInteger next = i + 1;
        LXYLrc *nextLrc = nil;
        if (next < count) {
            nextLrc = self.lyrices[next];
        }
        
        if (self.currentIndex != i && currentTime >= currentLrc.time && currentTime < nextLrc.time) {
            NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
            // 上一個
            NSIndexPath *previousIndexPath = [NSIndexPath indexPathForRow:self.currentIndex inSection:0];
            self.currentIndex = i;
            // 刷新
            [self.tableView reloadRowsAtIndexPaths:@[indexPath, previousIndexPath] withRowAnimation:UITableViewRowAnimationNone];
            // 滾動
            [self.tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:YES];
            
            // 設置外面歌詞的label
            self.lrcLabel.text = currentLrc.content;

        }
        
        // 根據速度，顯示label畫多少
        if (self.currentIndex == i) {
            NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
            LrcTableViewCell *cell = (LrcTableViewCell *)[self.tableView cellForRowAtIndexPath:indexPath];
            
            // 更新label的進度
            CGFloat progress = (currentTime - currentLrc.time) / (nextLrc.time - currentLrc.time);
            cell.lrcLabel.progress = progress;
            
            // 設置外面的歌詞進度
            self.lrcLabel.progress = progress;
        }
    }
    
}

@end

• 繪制label

- (void)setProgress:(CGFloat)progress {
    _progress = progress;
    
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    
    // 獲取需要畫的區域
    CGRect fillRect = CGRectMake(0, 0, self.bounds.size.width * self.progress, self.bounds.size.height);
    [[UIColor colorWithRed:45/255.0 green:183/255.0 blue:101/255.0 alpha:1] set];
    // 添加區域
    UIRectFillUsingBlendMode(fillRect, kCGBlendModeSourceIn);
    
}