微信发开怎么让歌词滚动起来

audio有个属性叫做

bindtimeupdate：（

类型：eventhandle，当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}

）

给他一个方法名，后端写方法;

首先我们到获取当前歌曲进度时间：

  var currentTime=e.detail.currentTime;

然后我们也要获取当前歌词里面的时间，一般歌词接口返回歌词的时候都会有时间的，不过他们的时间位置就不一定了，一些是放在歌词里面一些跟你提取出来了放在外面。

  var lyricArray=this.data.lyricArray;

然后我们要设置好歌词的长度一些东西了，

  if (this.data.currentIndex>=8) {
    this.setData({
      marginTop:(this.data.currentIndex-8)*30
    })
  }

然后就是简单单独判断当时间到达了歌词这时间的时候歌词的长度的变化

  if (this.data.currentIndex==lyricArray.length-2) {
    if (currentTime>=lyricArra[lenght-1].time) {
      this.setData({
        currentIndex:lyricArray.length-1
      })
    }
  }
  else{
  for (var i = 0; i < lyricArray.length; i++) {
    if (currentTime>=lyricArray[i].time && currentTime<lyricArray[i+1].time ) {
      this.setData({
        currentIndex:i
      })
    }
    
  }}

最后就是在歌词class里面加个属性，当这条歌词播放的时候会显示颜色

        <block wx:for="{{lyricArray}}" wx:for-item="lyric" wx:for-index="index">
          <text class="{{currentIndex==index?'currentLyric':''}}">{{lyric.lineLyric}}</text>
        </block>

.lyric-wraaper .currentLyric{
  color: red;
}

这样就完成了简单的歌词滚动了。