1.首先本地準備了一段文稿（可以直接獲取動態(tài)的掂咒，這里為了方便看到lrc文件內(nèi)部，直接使用靜態(tài)數(shù)據(jù)了）
Page{(
data:{
//文稿內(nèi)容
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]墜落自責的海洋',
//文稿數(shù)組，轉(zhuǎn)化完成用來在wxml中使用
storyContent:[],
//文稿滾動距離
marginTop:0,
//當前正在第幾行
currentIndex222:0
}
)}
2.處理文稿（playFun是播放事件败去，在這里我把lrc格式的文稿放在點擊播放的事件里了，當然可以根據(jù)需要自行修改）
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, //用于匹配時間的正則表達式烈拒，匹配的結(jié)果類似[xx:xx.xx]
//去掉不含時間的行
while (!pattern.test(lines[0])) {
lines = lines.slice(1);
};
//上面用'\n'生成數(shù)組時圆裕，結(jié)果中最后一個為空元素，這里將去掉
lines[lines.length - 1].length === 0 && lines.pop();
lines.forEach(function (v /*數(shù)組元素值*/, i /*元素索引*/, a /*數(shù)組本身*/) {
//提取出時間[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(':');
//將結(jié)果壓入最終數(shù)組
result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
});
});
//最后將結(jié)果數(shù)組中的元素按時間大小排序，以便保存之后正常顯示歌詞
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函數(shù)中)
// 背景音頻播放進度更新事件
backgroundAudioManager.onTimeUpdate(function() {
if (that.data.currentIndex222 >= 6) {//超過6行開始滾動
that.setData({
marginTop: (that.data.currentIndex222 - 6) * 20
})
}
// 文稿對應(yīng)行顏色改變
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:代表當前行數(shù)
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;
}
}
}
}
});
},
注：
- 第四點中行數(shù)的變化使用了for循環(huán)，待優(yōu)化诞吱，各位小伙伴如果有更好的辦法歡迎留言
- scroll-view 一定要設(shè)置允許縱向滾動剂陡，還有高度狈涮，scroll-with-animation='true'添加動畫當你滾動的位置與現(xiàn)在正在進行的行數(shù)差距較大時，自動滾動回去時效果比較好
附一張文稿圖
1538815873(1).jpg
兩個文件處理方法由于時間太長鸭栖，不知從哪位前輩那里借鑒來的，如涉及版權(quán)可聯(lián)系本人刪除
