上一节我们为歌曲页添加了封面。 这一节我们要为歌曲页添加歌词。 同样的, 我们的歌词在最初开始的时候并没有考虑在内。 我们回到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')
}