10. 歌曲与歌词同步

一、思路分析

• 设置lyricTextEdit文本被选中时的背景颜色为红色

• 根据播放的时间，查找lyricTimeMap 找到时间对应的歌词行号

• 根据播放时间对应的歌词行号，在lyricTextEdit根据行号找到对应的歌词

• 根据行号找到歌词，将歌词文本选中

二、根据歌曲播放时间查找歌词对应行号

"00:00.00" : "周华健 - 风雨无阻"
"00:00.03" : "作词：李子恒"
"00:00.61" : "作曲：李子恒"
"00:20.89" : "给你我的全部"
"00:24.48" : "你是我今生唯一的赌注"
"00:29.08" : "只留下一段岁月"
"00:31.26" : "让我无怨无悔全心的付出"
"00:37.12" : "怕你忧伤怕你哭"
"00:41.50" : "怕你孤单怕你糊涂"
"00:45.40" : "红尘千山万里路"
"00:49.23" : "我可以朝朝暮暮"
"00:53.58" : "给你一条我的路"
"00:57.57" : "你是我一生不停的脚步"
"01:01.92" : "让我走出一片天空"
"01:04.30" : "让你尽情飞舞放心的追逐"
"01:10.17" : "爱是漫长的旅途"
"01:14.16" : "梦有快乐梦有痛苦"
"01:18.56" : "悲欢离合人间路"
"01:22.55" : "我可以缝缝补补"

MusicPlayer::MusicPlayer(QObject *parent) : QMediaPlayer(parent)
{
    connect(this,&MusicPlayer::positionChanged,
            this,&MusicPlayer::queryPlayLryicLineByTime);
    //设置时间通知间隔:200ms        
    this->setNotifyInterval(200);
}
​
​
void MusicPlayer::queryLyricLineNumberByTime(qint64 time)
{
    QMap<qint64,int>::iterator it = lyricTimeMap.lowerBound(time);
    if(it != lyricTimeMap.end()){
        int line = it.key() > time ? it.value() - 1 : it.value();
        emit playLyricLineChanged(line);
    }
    return;
}

三、根据行号选中播放的歌词

void MusicWindow::initMusicLyricTextEdit()
{
    ui->stackedWidget->setCurrentIndex(1);
    QPalette palette = ui->lyricTextEdit->palette();
    palette.setColor(QPalette::Highlight,QColor(Qt::transparent));//选中时的背景色
    palette.setColor(QPalette::HighlightedText,QColor(Qt::red));//选中时的字体颜色
    ui->lyricTextEdit->setPalette(palette);
    ui->lyricTextEdit->releaseKeyboard();
    ui->lyricTextEdit->releaseMouse();
    QTextDocument *doc = ui->lyricTextEdit->document();
    doc->setDefaultTextOption(QTextOption(Qt::AlignHCenter));
    ui->stackedWidget->setCurrentIndex(0);
    
    return;
}

CloudMusicWindow::CloudMusicWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::CloudMusicWindow)
{
    musicPlayer = new MusicPlayer(this);
    connect(musicPlayer,&MusicPlayer::playLyricLineChanged,
            this,&CloudMusicWindow::selectPlayLyricByLine);
}
​
void MusicWindow::selectPlayLyricByLine(int line)
{
    //根据行号确定位置
    QTextDocument *doc = ui->lyricTextEdit->document();
    int pos = doc->findBlockByLineNumber(line).position();
    
    //获取光标
    QTextCursor tc = ui->lyricTextEdit->textCursor();
    
    //设置光标的位置:MoveAnchor表示普通的移动光标，不选中任何内容。
    tc.setPosition(pos,QTextCursor::MoveAnchor);
    //移动光标的位置:KeepAnchor表示移动光标的同时选中之间的内容
    tc.movePosition(QTextCursor::EndOfLine,QTextCursor::KeepAnchor);
    
    //设置光标 
    ui->lyricTextEdit->setTextCursor(tc);
     
    return;
}