小程序---音乐播放器（实时滚动歌词）

1.首先本地准备了一段文稿（可以直接获取动态的，这里为了方便看到lrc文件内部，直接使用静态数据了）

Page{(
  data:{
      //文稿内容
      lrcDir: '[00:00.00]张紫豪 - 可不可以\n[00:02.00]词：刘伟锋\n[00:03.00]曲：刘伟锋\n[00:04.00]编曲：刘伟锋\n[00:05.00]录制混缩：巨人先生\n[00:07.00]出品：西亚斯音频工作室\n[00:16.01]说好带你流浪\n[00:19.59]而我却半路返航\n[00:23.10]坠落自责的海洋',
      //文稿数组，转化完成用来在wxml中使用
      storyContent:[],
      //文稿滚动距离
      marginTop:0,
      //当前正在第几行
      currentIndex222:0
    }
)}

2.处理文稿（playFun是播放事件，在这里我把lrc格式的文稿放在点击播放的事件里了，当然可以根据需要自行修改）

playFun:function(){
  this.setData({
     storyContent: that.sliceNull(that.parseLyric(that.data.lrcDir))
   })
}

• 上面用到两个处理方法

1. parseLyric()

parseLyric: function (text) {
    result = [];
    var lines = text.split('\n'), //切割每一行
     pattern = /\[\d{2}:\d{2}.\d{2}\]/g, //用于匹配时间的正则表达式，匹配的结果类似[xx:xx.xx]
    //去掉不含时间的行
    while (!pattern.test(lines[0])) {
      lines = lines.slice(1);
    };
    //上面用'\n'生成数组时，结果中最后一个为空元素，这里将去掉
    lines[lines.length - 1].length === 0 && lines.pop();
    lines.forEach(function (v /*数组元素值*/, i /*元素索引*/, a /*数组本身*/) {
      //提取出时间[xx:xx.xx]
      var time = v.match(pattern),
        //提取歌词
        value = v.replace(pattern, '');
      // 因为一行里面可能有多个时间，所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式，需要进一步分隔
      time.forEach(function (v1, i1, a1) {
        //去掉时间里的中括号得到xx:xx.xx
        var t = v1.slice(1, -1).split(':');
        //将结果压入最终数组
        result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
      });
    });
    //最后将结果数组中的元素按时间大小排序，以便保存之后正常显示歌词
    result.sort(function (a, b) {
      return a[0] - b[0];
    });
    return result;
  },

2. sliceNull()

//去除空白
  sliceNull: function (lrc) {
    var result = []
    for (var i = 0; i < lrc.length; i++) {
      if (lrc[i][1] == "") {
      } else {
        result.push(lrc[i]);
      }
    }
    return result
  },

3.文稿的渲染

wxml:

<scroll-view  scroll-y="true" scroll-with-animation='true' scroll-top='{{marginTop}}'>
      <view class='contentText'>
           <block wx:for='{{storyContent}}'>
               <text class="{{currentIndex222 == index ? 'currentTime' : ''}}">{{item[1]}}</text>
            </block>
       </view>
</scroll-view>

wxss:

.currentTime{
  color:red;
}

4.文稿的滚动(onLoad函数中)

 // 背景音频播放进度更新事件
    backgroundAudioManager.onTimeUpdate(function() {
      
      if (that.data.currentIndex222 >= 6) {//超过6行开始滚动
        that.setData({
          marginTop: (that.data.currentIndex222 - 6) * 20
        })
      }
      // 文稿对应行颜色改变
      if (that.data.currentIndex222!=that.data.storyContent.length - 1){//
        var j = 0;
        for (var j = that.data.currentIndex222; j < that.data.storyContent.length; j++) {
          // 当前时间与前一行，后一行时间作比较， j:代表当前行数
          if (that.data.currentIndex222 == that.data.storyContent.length - 2) {
           //最后一行只能与前一行时间比较
            if (parseFloat(backgroundAudioManager.currentTime) > parseFloat(that.data.storyContent[that.data.storyContent.length - 1][0])) {
              that.setData({
                currentIndex222: that.data.storyContent.length - 1
              })
              return;
            }
          } else {
            if (parseFloat(backgroundAudioManager.currentTime) > parseFloat(that.data.storyContent[j][0]) && parseFloat(backgroundAudioManager.currentTime) < parseFloat(that.data.storyContent[j + 1][0])) {
              that.setData({
                currentIndex222: j
              })
              return;
            }
          }
        }
      }
    });
  },

注：

1. 第四点中行数的变化使用了for循环，待优化，各位小伙伴如果有更好的办法欢迎留言
2. scroll-view 一定要设置允许纵向滚动，还有高度，scroll-with-animation='true'添加动画当你滚动的位置与现在正在进行的行数差距较大时，自动滚动回去时效果比较好

附一张文稿图

1538815873(1).jpg

两个文件处理方法由于时间太长，不知从哪位前辈那里借鉴来的，如涉及版权可联系本人删除