From 3b9fec33085926381442ce7d7a8cb5b95e869b8b Mon Sep 17 00:00:00 2001 From: zhengyi Date: Sun, 5 Mar 2023 18:41:11 +0800 Subject: [PATCH] =?UTF-8?q?[Feature]=20=E6=B7=BB=E5=8A=A0=E6=AD=8C?= =?UTF-8?q?=E8=AF=8D=E8=A7=A3=E6=9E=90=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../poem-audio/lyric-parser/lyric-parser.js | 60 +++++++++++++++++++ .../poem-audio/lyric-parser/lyric-parser.json | 4 ++ .../poem-audio/lyric-parser/lyric-parser.wxml | 6 ++ .../poem-audio/lyric-parser/lyric-parser.wxss | 17 ++++++ components/poem-audio/poem-audio.js | 13 +++- components/poem-audio/poem-audio.json | 3 +- components/poem-audio/poem-audio.wxml | 2 +- config/network.js | 4 +- pages/author-detail/author-detail.wxml | 2 +- pages/favorite/favorite.json | 4 +- pages/favorite/favorite.wxml | 5 +- pages/favorite/favorite.wxss | 4 +- pages/poem-detail/poem-detail.js | 5 ++ pages/poem-detail/poem-detail.wxml | 4 +- 14 files changed, 120 insertions(+), 13 deletions(-) create mode 100644 components/poem-audio/lyric-parser/lyric-parser.js create mode 100644 components/poem-audio/lyric-parser/lyric-parser.json create mode 100644 components/poem-audio/lyric-parser/lyric-parser.wxml create mode 100644 components/poem-audio/lyric-parser/lyric-parser.wxss diff --git a/components/poem-audio/lyric-parser/lyric-parser.js b/components/poem-audio/lyric-parser/lyric-parser.js new file mode 100644 index 0000000..971585e --- /dev/null +++ b/components/poem-audio/lyric-parser/lyric-parser.js @@ -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: { + + } +}) diff --git a/components/poem-audio/lyric-parser/lyric-parser.json b/components/poem-audio/lyric-parser/lyric-parser.json new file mode 100644 index 0000000..e8cfaaf --- /dev/null +++ b/components/poem-audio/lyric-parser/lyric-parser.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/components/poem-audio/lyric-parser/lyric-parser.wxml b/components/poem-audio/lyric-parser/lyric-parser.wxml new file mode 100644 index 0000000..354c1fe --- /dev/null +++ b/components/poem-audio/lyric-parser/lyric-parser.wxml @@ -0,0 +1,6 @@ + + {{line.text}} + \ No newline at end of file diff --git a/components/poem-audio/lyric-parser/lyric-parser.wxss b/components/poem-audio/lyric-parser/lyric-parser.wxss new file mode 100644 index 0000000..9978e80 --- /dev/null +++ b/components/poem-audio/lyric-parser/lyric-parser.wxss @@ -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; +} \ No newline at end of file diff --git a/components/poem-audio/poem-audio.js b/components/poem-audio/poem-audio.js index 4e29b6f..b861a5c 100644 --- a/components/poem-audio/poem-audio.js +++ b/components/poem-audio/poem-audio.js @@ -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}) + } + } }, }) diff --git a/components/poem-audio/poem-audio.json b/components/poem-audio/poem-audio.json index 95aa132..21f60da 100644 --- a/components/poem-audio/poem-audio.json +++ b/components/poem-audio/poem-audio.json @@ -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" } } \ No newline at end of file diff --git a/components/poem-audio/poem-audio.wxml b/components/poem-audio/poem-audio.wxml index 9d07bba..76b6d93 100644 --- a/components/poem-audio/poem-audio.wxml +++ b/components/poem-audio/poem-audio.wxml @@ -1,6 +1,6 @@ - {词解析器空位} + - diff --git a/pages/favorite/favorite.json b/pages/favorite/favorite.json index 8835af0..841dc76 100644 --- a/pages/favorite/favorite.json +++ b/pages/favorite/favorite.json @@ -1,3 +1,5 @@ { - "usingComponents": {} + "usingComponents": { + "t-empty": "tdesign-miniprogram/empty/empty" + } } \ No newline at end of file diff --git a/pages/favorite/favorite.wxml b/pages/favorite/favorite.wxml index 9398d79..5a979af 100644 --- a/pages/favorite/favorite.wxml +++ b/pages/favorite/favorite.wxml @@ -1,2 +1,3 @@ - -pages/favorite/favorite.wxml + + + \ No newline at end of file diff --git a/pages/favorite/favorite.wxss b/pages/favorite/favorite.wxss index 73d3d0f..8da17de 100644 --- a/pages/favorite/favorite.wxss +++ b/pages/favorite/favorite.wxss @@ -1 +1,3 @@ -/* pages/favorite/favorite.wxss */ \ No newline at end of file +.favorite-container { + padding: 30rpx; +} \ No newline at end of file diff --git a/pages/poem-detail/poem-detail.js b/pages/poem-detail/poem-detail.js index d9860c0..dae3c0c 100644 --- a/pages/poem-detail/poem-detail.js +++ b/pages/poem-detail/poem-detail.js @@ -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() } }) \ No newline at end of file diff --git a/pages/poem-detail/poem-detail.wxml b/pages/poem-detail/poem-detail.wxml index a4e0f0a..20887b5 100644 --- a/pages/poem-detail/poem-detail.wxml +++ b/pages/poem-detail/poem-detail.wxml @@ -1,5 +1,5 @@ - + @@ -14,7 +14,7 @@ - +