[Feature] 添加歌词解析功能

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: {
+
+  }
+})

components/poem-audio/lyric-parser/lyric-parser.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/poem-audio/lyric-parser/lyric-parser.wxml

@@ -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>

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;
+}

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})
+      }
+    }
   },
 
 })

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"
   }
 }

components/poem-audio/poem-audio.wxml

@@ -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}}"

config/network.js

@@ -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: ''
 }

pages/author-detail/author-detail.wxml

@@ -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">

pages/favorite/favorite.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "t-empty": "tdesign-miniprogram/empty/empty"
+  }
 }

pages/favorite/favorite.wxml

@@ -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>

pages/favorite/favorite.wxss

@@ -1 +1,3 @@
-/* pages/favorite/favorite.wxss */
+.favorite-container {
+  padding: 30rpx;
+}

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()
   }
 })

pages/poem-detail/poem-detail.wxml

@@ -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}}" />