为歌曲页添加歌词

版权声明： https://blog.csdn.net/Helloyongwei/article/details/81738126

上一节我们为歌曲页添加了封面。 这一节我们要为歌曲页添加歌词。 同样的， 我们的歌词在最初开始的时候并没有考虑在内。 我们回到song-form.js中，给data添加一个lyrics的属性表示歌词, 注意修改其它代码保证不会出错。

我们的歌词填在如下结构：

<div class="song-description">
    <h1><!--这里时歌名--></h1>
    <div class="lyric">
        <div class="lines">
            <!--这里时歌词-->
        </div>
    </div>
</div>

我们要先获取歌词， 并将其添加到div.line中去

let {lyrics} = song
//添加歌词
lyrics.split('\n').map((string)=>{
    let p = document.createElement('p')
    let regex = /\[([\d:.]+)\](.+)/
    let matches = string.match(regex)
    if (matches) {
        p.textContent = matches[2]
        let time = matches[1]
        let parts = time.split(':')
        let minutes = parts[0]
        let seconds = parts[1]
        let newTime = parseInt(minutes, 10)*60 + parseFloat(seconds, 10)
        p.setAttribute('date-time', newTime)
    } else {
        p.textContent = string
    }
    this.$el.find('.lyric > .lines').append(p)
})

注意歌词的标准形式， 前面是时间， 后面才是歌词。在播放时， 歌词会显示出来并且随着播放时间而滚动。

 audio.ontimeupdate = ()=>{
    this.showLyric(audio.currentTime)
}

showLyric(time) {
   let allP = this.$el.find('.lyric > .lines > p')
    let p 
    for (let i = 0; i < allP.length; i++) {
        if (i === allP.length-1) {
            p = allP[i]
            break   
        } else {
            let currentTime = allP.eq(i).attr('data-time')
            let nextTime = allP.eq(i+1).attr('data-time')
            if (currentTime <= time && time < nextTime) {
                p = allP[i]
                break
            }
        }
    } 
    let pHeight = p.getBoundingClientRect().top
    let linesHeight = this.$el.find('.lyric > .lines')[0].getBoundingClientRect.top
    let height = pHeight - linesHeight
    this.$el.find('.lyric > .lines').css({
        transform: `translateY(${- (height - 25)}px)`
    })
    $(p).addClass('active').siblings('.active').removeClass('active')
}