小程序歌词展示，格式lrc歌词

代码：

wxml:

　　　　

<view class="page">

<view class="lrc" style="margin-top:{{marginTop}}px;height:{{lrcHeight}}px">
<block wx:for="{{lry}}" wx:key="">
<view class="lry {{currentIndex == index ? 'currentTime' : ''}}">{{item[1]}}</view>
</block>
</view>
<image class="pic_sig" src="{{pic}}"></image>
<view class="bottom">
<view class="state">
<image class="state_chose" bindtap="before" src="../images/pre.png"></image>
<image class="state_play" bindtap="playAndPause" src="{{isPlaying ? '../images/pause.png' : '../images/play.png'}}"></image>
<image class="state_chose" bindtap="next" src="../images/next.png"></image>
</view>
<view class="controller">
<text class="time-start">{{songState.currentPosition}}</text>
<view class="time-bar">
<view class="time-play" style="transform: translateX({{songState.progress}}%)"></view>
</view>
<text class="time-total">{{songState.duration}}</text>
</view>
</view>
</view>

js：

　　const app = getApp()

import api from '../../api/API.js'

Page({

data: {

isPlaying: true,

currentIndex: 0,

marginTop: 0,

lrcHeight:200,

songState: {

progress: 0,

currentPosition: '00:00',

duration: '00:00',

datalist: [],

lry: [],

}

},

onLoad: function (options) {

var that = this;

that.setData({

datalist: wx.getStorageSync('song'),

songIndex: options.songIndex,

})

that.requestDataSong(options.songId)

that.songLrc(options.songId)

//自动播放下一首

wx.onBackgroundAudioStop(function () {

that.next()

})

},

requestDataSong: function (songId) {

var that = this

app.requestData('http://ting.baidu.com/data/music/links?songIds=' + songId, {}, (err, data) => {

that.setData({

pic: data.data.songList["0"].songPicRadio,

bigData: data.data.songList["0"],

})

wx.playBackgroundAudio({

dataUrl: data.data.songList["0"].songLink,

})

})

that.playSong()

},

playSong: function () {

var that = this

let inv = setInterval(function () {

wx.getBackgroundAudioPlayerState({

success: function (res) {

if (res.status == 1) {

that.setData({

isPlaying: true,

songState: {

progress: res.currentPosition / res.duration * 100,

currentPosition: that.timeToString(res.currentPosition),

duration: that.timeToString(res.duration),

}

})

var i = that.data.currentIndex

if (i < that.data.lry.length) {

if (res.currentPosition - 4 >= parseInt(that.data.lry[i][0])) {

that.setData({

currentIndex: i + 1

})

}

}

if (that.data.currentIndex >= 6) {

that.setData({

marginTop: -(that.data.currentIndex - 6) * 20,

lrcHeight:200 + (that.data.currentIndex - 6) * 20

})

}

} else {

that.setData({

isPlaying: false

})

clearInterval(inv)

}

}

})

}, 1000)

},

playAndPause: function () {

var that = this

if (that.data.isPlaying) {

wx.pauseBackgroundAudio()

} else {

wx.playBackgroundAudio()

}

that.playSong()

that.setData({

isPlaying: !that.data.isPlaying

})

},

//上一首

before: function () {

var that = this

that.setData({

currentIndex: 0,

marginTop: 0,

lrcHeight:200,

})

if (that.data.songIndex == 0) {

that.requestDataSong(that.data.datalist[that.data.datalist.length - 1].song_id)

that.songLrc(that.data.datalist[that.data.datalist.length - 1].song_id)

that.setData({

songIndex: that.data.datalist.length - 1

})

} else {

that.requestDataSong(that.data.datalist[that.data.songIndex - 1].song_id)

that.songLrc(that.data.datalist[that.data.songIndex - 1].song_id)

that.setData({

songIndex: that.data.songIndex - 1

})

}

},

//下一首

next: function () {

var that = this

that.setData({

currentIndex: 0,

marginTop: 0,

lrcHeight:200,

})

if (that.data.songIndex == that.data.datalist.length - 1) {

that.requestDataSong(that.data.datalist[0].song_id)

that.songLrc(that.data.datalist[0].song_id)

that.setData({

songIndex: 0

})

} else {

that.setData({

songIndex: parseInt(that.data.songIndex) + 1

})

that.requestDataSong(that.data.datalist[that.data.songIndex].song_id)

that.songLrc(that.data.datalist[that.data.songIndex].song_id)

}

},

//请求歌词

songLrc: function (songid) {

var that = this

app.requestData('http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.lry&songid=' + songid, {}, (err, data) => {

if (data.lrcContent == undefined) {

var lrc = "无歌词";

} else {

var lrc = data.lrcContent;

}

that.setData({

lry: that.sliceNull(that.parseLyric(lrc))

})

})

},

//去除空白

sliceNull: function (lrc) {

var result = []

for (var i = 0; i < lrc.length; i++) {

if (lrc[i][1] == "") {

} else {

result.push(lrc[i]);

}

}

return result

},

parseLyric: function (text) {

//将文本分隔成一行一行，存入数组

var lines = text.split('\n'),

//用于匹配时间的正则表达式，匹配的结果类似[xx:xx.xx]

pattern = /\[\d{2}:\d{2}.\d{2}\]/g,

//保存最终结果的数组

result = [];

//去掉不含时间的行

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;

},

timeToString: function (duration) {

let str = '';

let minute = parseInt(duration / 60) < 10 ? ('0' + parseInt(duration / 60)) : (parseInt(duration / 60));

let second = duration % 60 < 10 ? ('0' + duration % 60) : (duration % 60);

str = minute + ':' + second;

return str;

},

})　　

wxss:

.page {

position: fixed;

left: 0;

margin: 0;

width: 100%;

height: 100%;

background-color: #fff;

font-family: Arial, Helvetica, sans-serif;

font-size: 34rpx;

}

.lrc,.pic_sig {

width: 100%;

display: flex;

flex-direction: column;

align-items: center;

font-size: 30rpx;

overflow: hidden;

}

.pic_sig {

height: 240px;

position: fixed;

left: 0;

top: 0;

}

.lrc {

position: fixed;

left: 0;

top: 240px;

}

.lry {

height: 20px;

line-height:20px;

text-align: center;

}

.currentTime {

color: #be241c;

/*height: 30px;

line-height: 30px;*/

}

.bottom {

position: fixed;

bottom: 0;

width: 100%;

}

.state {

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

}

.state_chose {

width: 58rpx;

height: 58rpx;

margin-left: 60rpx;

margin-right: 60rpx;

}

.state_play {

width: 100rpx;

height: 100rpx;

}

.controller{

height: 80rpx;

display: flex;

justify-content: space-between;

align-items: center;

}

.time-start, .time-total{

flex: none;

color: #808080;

width: 110rpx;

text-align: center;

font-size: 24rpx;

}

.time-bar{

position: relative;

flex: auto;

height: 4rpx;

overflow: hidden;

background: lightgray;

}

.time-play{

position: absolute;

left: -100%;

width: 100%;

height: 100%;

background: #be241c;

transition: all 1s linear;

}

.progress{

height: 80rpx;

display: flex;

justify-content: space-between;

align-items: center;

}

主要代码就是js里面的歌词处理可以粘贴下来研究下