微信小程序-歌詞滾動實現

一、分析歌詞結構：

[00:00.00]虎二 - 窗
[00:00.28]作詞：虎二
[00:00.43]作曲：虎二
[00:00.58]編曲：虎二、姚瀚霄@驍Studio
[00:00.88]制作人：閆驍男@驍Studio
....

結構：時間+歌詞

二、包裝歌詞：

[{time: "0.00", lyric: "虎二 - 窗↵"}
{time: "0.28", lyric: "作詞：虎二↵"}
{time: "0.43", lyric: "作曲：虎二↵"}
{time: "0.58", lyric: "編曲：虎二、姚瀚霄@驍Studio↵"}
...]

三、創建兩個定時器

1.不斷遍歷歌詞對象，判斷當前時間所處行數

lyricListen(){
    //每500毫秒循環一次
    _self.data.lyricInter = setInterval(function(){
      var lyrics = _self.data.lyrics;
      for(var i=0; i<lyrics.length; i++){
        if(_self.data.musicTimer>lyrics[lyrics.length-1].time){
          _self.setData({lyricIndex:lyrics.length-1});
          _self.stop(); 
          break;
        }
        if(_self.data.musicTimer>lyrics[i].time && _self.data.musicTimer<lyrics[i+1].time) {
          _self.setData({lyricIndex:i});
        }
      }
    },500);
 },

2.秒級時間定時器

_self.data.musicInter = setInterval(function(){
      _self.setData({
        musicTimer:_self.data.musicTimer+1
      })
      console.log("[歌詞時間]-"+_self.data.lyrics[_self.data.lyricIndex].time,"[歌曲當前秒數]-"+_self.data.musicTimer);
},1000)

四，加一點細節

效果如下：