小程序歌词展示，格式lrc歌词
Posted 李俊涛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序歌词展示，格式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里面的歌词处理可以粘贴下来研究下
以上是关于小程序歌词展示，格式lrc歌词的主要内容，如果未能解决你的问题，请参考以下文章