[Feature] 添加歌词解析功能
This commit is contained in:
parent
aeeb4cdd10
commit
3b9fec3308
|
@ -0,0 +1,60 @@
|
|||
import request from "../../../utils/request";
|
||||
|
||||
// components/poem-audio/lyric-parser/lyric-parser.js
|
||||
function parseLyric(raw) {
|
||||
// [00:10.30] 这是歌词
|
||||
// {time: 10.3, text: '这是歌词'}
|
||||
raw = raw.split('\n')
|
||||
let lyric = []
|
||||
raw.map(line => {
|
||||
let lineSplit = line.trim().split(/\[(\d{1,2}):(\d{1,2}).(\d{1,2})\]/)
|
||||
let time = 0
|
||||
let text = lineSplit[0]
|
||||
if (lineSplit.length >= 5) {
|
||||
time = parseInt(lineSplit[1]) * 60 + parseInt(lineSplit[2]) + parseFloat(lineSplit[3]) / 10000
|
||||
text = lineSplit[4]
|
||||
}
|
||||
lyric.push({time, text})
|
||||
})
|
||||
return lyric
|
||||
}
|
||||
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
url: '',
|
||||
time: 0
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
isLoaded: false,
|
||||
rawLyric: '',
|
||||
lyric: []
|
||||
},
|
||||
|
||||
observers: {
|
||||
'url': function (url) {
|
||||
if (url === '' || this.data.isLoaded) return
|
||||
let _this = this
|
||||
// 从接口读取歌词
|
||||
request(url).then(res => {
|
||||
let raw = res.data
|
||||
let lyric = parseLyric(raw)
|
||||
console.log(lyric);
|
||||
_this.setData({rawLyric: raw, lyric, isLoaded: true})
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
|
||||
}
|
||||
})
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
|
@ -0,0 +1,6 @@
|
|||
<view class="lyric-parser">
|
||||
<view class="lyric-line {{time>=line.time&&(lyric.length>idx+1?time<lyric[idx+1].time:true)?'now':''}}"
|
||||
wx:for="{{lyric}}"
|
||||
wx:for-index="idx"
|
||||
wx:for-item="line">{{line.text}}</view>
|
||||
</view>
|
|
@ -0,0 +1,17 @@
|
|||
.lyric-parser {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.lyric-line {
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.lyric-line.now {
|
||||
color: #0052d9;
|
||||
font-size: 40rpx;
|
||||
}
|
|
@ -18,7 +18,8 @@ Component({
|
|||
isPlaying: false,
|
||||
fullTime: 0,
|
||||
currTime: 0,
|
||||
playListenerTimer: -1
|
||||
playListenerTimer: -1,
|
||||
baseUrl: network.backstageUrl
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -69,7 +70,15 @@ Component({
|
|||
this.play()
|
||||
}
|
||||
},
|
||||
|
||||
/** 销毁播放器 */
|
||||
removePlayer() {
|
||||
console.log('removing');
|
||||
if (this.data.audioCtx) {
|
||||
this.pause()
|
||||
this.data.audioCtx.destroy()
|
||||
this.setData({audioCtx: null})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-progress": "tdesign-miniprogram/progress/progress",
|
||||
"audio-controls": "audio-controls/audio-controls"
|
||||
"audio-controls": "audio-controls/audio-controls",
|
||||
"lyric-parser": "lyric-parser/lyric-parser"
|
||||
}
|
||||
}
|
|
@ -1,6 +1,6 @@
|
|||
<view class="poem-audio-container">
|
||||
<view class="lyric-area">
|
||||
{词解析器空位}
|
||||
<lyric-parser url="{{lyric}}" time="{{currTime}}" />
|
||||
</view>
|
||||
<audio-controls currTime="{{currTime}}"
|
||||
fullTime="{{fullTime}}"
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
export default {
|
||||
backstageUrl: 'http://192.168.31.184:8080',
|
||||
// backstageUrl: 'https://poem.mczhengyi.top/prod-api',
|
||||
// backstageUrl: 'http://192.168.31.184:8080',
|
||||
backstageUrl: 'https://poem.mczhengyi.top/prod-api',
|
||||
ossUrl: ''
|
||||
}
|
|
@ -4,7 +4,7 @@
|
|||
baseUrl="{{baseUrl}}"
|
||||
arrow="{{false}}" />
|
||||
</t-sticky>
|
||||
<t-tabs defaultValue="{{1}}"
|
||||
<t-tabs defaultValue="{{0}}"
|
||||
sticky
|
||||
sticky-props="{{tabProp}}"
|
||||
bind:change="tabChange">
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
{
|
||||
"usingComponents": {}
|
||||
"usingComponents": {
|
||||
"t-empty": "tdesign-miniprogram/empty/empty"
|
||||
}
|
||||
}
|
|
@ -1,2 +1,3 @@
|
|||
<!--pages/favorite/favorite.wxml-->
|
||||
<text>pages/favorite/favorite.wxml</text>
|
||||
<view class="favorite-container">
|
||||
<t-empty icon="info-circle-filled" description="正在开发中" />
|
||||
</view>
|
|
@ -1 +1,3 @@
|
|||
/* pages/favorite/favorite.wxss */
|
||||
.favorite-container {
|
||||
padding: 30rpx;
|
||||
}
|
|
@ -44,5 +44,10 @@ Page({
|
|||
this.loadPoem(poemId)
|
||||
this.loadBlocks(poemId)
|
||||
this.loadAnimation(poemId)
|
||||
},
|
||||
onUnload() {
|
||||
let audioComponent = this.selectComponent('.poem-audio')
|
||||
console.log(audioComponent);
|
||||
audioComponent.removePlayer()
|
||||
}
|
||||
})
|
|
@ -1,5 +1,5 @@
|
|||
<view class="poem-detail-container">
|
||||
<t-tabs default-value="{{0}}" sticky swipeable="{{false}}">
|
||||
<t-tabs default-value="{{3}}" sticky swipeable="{{false}}">
|
||||
<t-tab-panel label="诗词" value="0">
|
||||
<poem-content poem="{{poem}}" author="{{author}}" blocks="{{blocks}}" />
|
||||
</t-tab-panel>
|
||||
|
@ -14,7 +14,7 @@
|
|||
</view>
|
||||
</t-tab-panel>
|
||||
<t-tab-panel wx:if="{{poem.audio!==null}}" label="朗读" value="3">
|
||||
<poem-audio audio="{{poem.audio}}" />
|
||||
<poem-audio class="poem-audio" audio="{{poem.audio}}" lyric="{{poem.lyric}}" />
|
||||
</t-tab-panel>
|
||||
<t-tab-panel wx:if="{{hasAnimation}}" label="动画" value="4">
|
||||
<poem-animation animationList="{{animations}}" />
|
||||
|
|
Loading…
Reference in New Issue