小程序歌词展示,格式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里面的歌词处理可以粘贴下来研究下

  

时间: 2024-10-09 04:17:49

小程序歌词展示,格式lrc歌词的相关文章

「小程序JAVA实战」小程序视频展示页开发(52)

转自:https://idig8.com/2018/09/22/xiaochengxujavashizhanxiaochengxushipinzhanshiyekaifa51/ 这次说下,小程序的视频组件,图标放置 关联到了之前没有说过的一个组件cover-view.https://github.com/limingios/wxProgram.git 中No.15 覆盖在原生组件之上的文本视图 官网介绍>https://developers.weixin.qq.com/miniprogram/d

小程序获取时间格式

效果图片: .wxml <view class='date'> <picker mode="date" value="{{date1}}" start="2018-01-01" end="2222-10-08" bindchange="changeDate1" fields="month"> <view> <{{util.sub1(date1)}

我的Android进阶之旅------&gt;Android自定义View来实现解析lrc歌词并同步滚动、上下拖动、缩放歌词的功能

前言 一LRC歌词文件简介 1什么是LRC歌词文件 2LRC歌词文件的格式 LRC歌词文件的标签类型 1标识标签 2时间标签 二解析LRC歌词 1读取出歌词文件 2解析得到的歌词内容 1表示每行歌词内容的实体类LrcRow 2解析歌词的构造器 ILrcBuilder接口 DefaultLrcBuilder歌词解析构造器 lrc歌词原始内容 lrc歌词解析后的内容 三显示LRC歌词内容 1定义一个ILrcViewListener接口 2定义一个ILrcView接口 3自定义一个LrcView 同步

微信小程序-整理各种小程序源码和资料免费下载

微信小程序整理下载 [小程序源码]微信小程序-车源宝微信版 [小程序源码]小程序-微赞社区(论坛demo) [小程序源码]微信小程序-收支账单 [小程序工具]微信小程序-日历 [小程序源码]小程序-在线聊天功能 [小程序源码]微信小程序-大好商城(新增功能天气查询和2048游戏) [小程序源码]微信小程序-查询号码归属地 [小程序源码]微信小程序-备忘录2 [小程序源码]微信小程序-QQ音乐 [小程序源码]小程序-货币汇率 [小程序源码]微信小程序-大学图书馆 [小程序源码]小程序-积分商城 [

微信小程序常见问题集合(长期更新)

程序问题: 森哥解答:1.找不到所要替换的文件  问题原因:开发工具版本不正确,老版本不支持 解决方案:确保下载的程序版本在0.9.092100以上  2.Failed to load resource: net::ERR_NAME_NOT_RESOLVEDhttp://1709827360.appservice.open.weixin.qq.com/appservice  问题原因:通常是由于系统设置了代理如Shadowsocks等. 解决方案:关闭代理,或者依次点击工具栏"动作"-

小程序积分商城、开屏广告,助力商家提高用户粘性

单商户小程序V1.7.7版本更新说明更新时间:2018年7月14号 一. 更新功能清单1. 新增积分商城,积分兑换商品或优惠券,助力商家提高会员活跃度:2. 新增首页广告,全屏与弹窗两种方式,方便商家品牌宣传与广告营销:3. 新增一种优惠券有效期设置方式,可选择设为领取后X天内有效. 二. 更新功能详细说明1. 新增积分商城,积分兑换商品或优惠券 应用场景:如何活跃用户.给老用户更多的会员福利?通过积分兑换商品或优惠券,结合积分体系,签到.购物.评价领积分等功能可以帮助到商家.应用价值:运营积分

小程序解决方案 Westore - 组件、纯组件、插件开发

数据流转 先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形成缩减版单向数据流. Github: https://github.com/dntzhang/westore 组件 这里说的组件便是自定义组件,使用原生小程序的开发格式如下: Component({ properties: { }, data: { }, methods: { } }) 使用 Wes

分享一下微信小程序的实例【转】

wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 shitoujiandaobu 小程序:石头剪刀布(附代码说明) audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义 star 微信小程序开发之五星评分 switchCity 微信小程序开发之城市选择器 城市切换 huadong_del  微信小程序滑动删除效果 jianh

微信小程序正式上线 可置于聊天窗口顶部

文/腾讯科技 韩依民 历经一年的等待后,小程序在2017年1月9日凌晨终于揭开神秘面纱,正式上线. 微信小程序推广海报 随着小程序正式上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序了. 用户只要将微信更新至最新版本,体验过小程序后,便可在发现页面看到小程序TAB,但微信并不会通过这个地方向用户推荐小程序. 值得一提的是,小程序提供了显示在聊天顶部的功能,这意味着用户在使用小程序的过程中可以快速返回至聊天界面,而在聊天界面也可快速进入小程序,实现小程序与聊天之间的便捷切换. 微