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))
})
}
- 上面用到两个处理方法
- 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;
},
- 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;
}
}
}
}
});
},
注：
- 第四点中行数的变化使用了for循环，待优化，各位小伙伴如果有更好的办法欢迎留言
- scroll-view 一定要设置允许纵向滚动，还有高度，scroll-with-animation='true'添加动画当你滚动的位置与现在正在进行的行数差距较大时，自动滚动回去时效果比较好
附一张文稿图
1538815873(1).jpg
两个文件处理方法由于时间太长，不知从哪位前辈那里借鉴来的，如涉及版权可联系本人删除
