无法高亮显示最后一行歌词

来源:4-15 歌词与播放时间联动

慕姐7077867

2022-01-17

老师,我的代码没有爆红,能运行。就是无法高亮显示最后一行歌词,03:55唱完最后一行,可是03:55~04:15这个时间段最后一行歌词都一直不高亮显示,这是为什么呢?

图片描述

// components/lyric/lyric.js
let lyricHeight = 0
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isLyricShow: {
      type: Boolean,
      value: false,
    },
    lyric: String,
  },

  observers: {
    lyric(lrc){
      console.log(lrc)
      this._parseLyric(lrc)
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    lrcList: [],
    nowLyricIndex: 0,   //当前选中的歌词的索引
    scrollTop: 0,       //滚动条滚动的高度
  },

  lifetimes: {
    ready(){
      //rpx与px的换算
      wx.getSystemInfo({
        success(res) {
          lyricHeight = res.screenWidth / 750 * 64   //求出1rpx的大小
        },
      })
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    update(currentTime){
      let lrcList = this.data.lrcList
      if(lrcList.length == 0 ){
        return
      }
      if(currentTime > lrcList[lrcList.length - 1].time){   //高亮显示最后一行歌词
        if(this.data.nowLyricIndex != -1){
          this.setData({
            nowLyricIndex: -1,
            scrollTop: lrcList.length * lyricHeight
          })
        }
      }
      for(let i =0,len = lrcList.length; i < len; i++){
        if(currentTime <= lrcList[i].time){
          this.setData({
            nowLyricIndex: i - 1,
            scrollTop: (i - 1) * lyricHeight,
          })
          break
        }
      }
    },

    _parseLyric(sLyric){   //解析歌词
      let line = sLyric.split('\n')
      // console.log(line)
      let _lrcList = []
      line.forEach((elem) => {   //循环
        let time = elem.match(/\[(\d{2,}):(\d{2})(?:\.(\d{2,3}))?]/g)  //正则表达式
        if(time != null){
          let lrc = elem.split(time)[1]
          let timeReg = time[0].match(/(\d{2,}):(\d{2})(?:\.(\d{2,3}))?/)
          //把时间转化为秒
          let time2Seconds = parseInt(timeReg[1]) * 60 + parseInt(timeReg[2]) + parseInt(timeReg[3]) / 1000
          _lrcList.push({
            lrc,
            time: time2Seconds,
          })
        }
      })
      this.setData({
        lrcList: _lrcList
      })
    }
  }
})

写回答

2回答

qq_慕先生1026127

2022-02-21

如果你要最后一句一直高亮 就设置index就好了啊

      if(currentTime > lrcList[lrcList.length - 1].time){   //高亮显示最后一行歌词
        if(this.data.nowLyricIndex != -1){
          this.setData({
              //这里改为 lrcList.length - 1
            nowLyricIndex: lrcList.length - 1,
            scrollTop: lrcList.length * lyricHeight
          })
        }
      }


0
1
慕姐7077867
解决了!感谢!!
2022-04-21
共1条回复

谢成

2022-01-24

这个应该看需求吧:

1、第一种,最后一句唱完了,最后一句不高亮,因为这个需求是只高亮正在唱的歌词

2、第二种,最后一句唱完了,但最后一句始终高亮,就算这句都完事了还是要高亮

0
2
谢成
回复
linda89757
课程中的做法是如果最后一句唱完了,时间过去了,就不高亮了。是上面的第一种。
2022-02-08
共2条回复

微信小程序云开发-从0打造云音乐全栈小程序

横跨小程序端、云后端、CMS一站式云开发的小程序全栈课程

1938 学习 · 2768 问题

查看课程