挑战结果音频播放与切换,进度条

pages/pkResult/index.js

@@ -12,7 +12,13 @@ Page({
    */
   data: {
     vState: false,
+    vStart: '00:00',
+    vEnd: '00:00',
+    vProgress: 0,
     dState: false,
+    dStart: '00:00',
+    dEnd: '00:00',
+    dProgress: 0,
     currentType: '',
     victory: {},
     defeated: {},
@@ -32,7 +38,6 @@ Page({
     this.storeBindings.updateStoreBindings()
     this.compareScore()
     this.innerAudioContext = wx.createInnerAudioContext()
-    this.setDuration();
   },
   compareScore() {
     let pkData = {
@@ -102,9 +107,27 @@ Page({
     })
   },
   // 设置时间文案
-  setDuration(value) {
-    console.log(value, this.data.currentType);
-
+  setDuration(s) {
+    let t = '';
+    s = Math.floor(s);
+    if (s > -1) {
+      let min = Math.floor(s / 60) % 60;
+      let sec = s % 60;
+      if (min < 10) {
+        t += "0";
+      }
+      t += min + ":";
+      if (sec < 10) {
+        t += "0";
+      }
+      t += sec;
+    }
+    let label = this.data.currentType == 'victory' ? 'vStart' : 'dStart'
+    let progressV = this.data.currentType == 'victory' ? 'vProgress' : 'dProgress'
+    this.setData({
+      [label]: t,
+      [progressV]: Math.round((this.innerAudioContext.currentTime / this.innerAudioContext.duration) * 100)
+    })
   },
   result() {
 

pages/pkResult/index.wxml

@@ -8,10 +8,10 @@
       <view class="bodyScore">{{victory.score}}分</view>
       <image src="{{vState?'/static/work.png':'/static/play-big.png'}}" class="bodyPlay" bindtap="playAudio"
         data-type="victory" />
-      <progress percent="60" stroke-width="4" class="progress" style="margin-right:48rpx;" />
+      <progress percent="{{vProgress}}" stroke-width="4" class="progress" style="margin-right:48rpx;" />
       <view class="duration">
-        <view class="start">0:00</view>
-        <view class="end">0:00</view>
+        <view class="start">{{vStart}}</view>
+        <view class="end">{{vEnd}}</view>
       </view>
     </view>
     <view class="right">
@@ -20,10 +20,10 @@
       <view class="bodyScore">{{defeated.score}}分</view>
       <image src="{{dState?'/static/work.png':'/static/play-big.png'}}" class="bodyPlay" bindtap="playAudio"
         data-type="defeated" />
-      <progress percent="60" stroke-width="4" class="progress" />
+      <progress percent="{{dProgress}}" stroke-width="4" class="progress" />
       <view class="duration">
-        <view class="start">0:00</view>
-        <view class="end">0:00</view>
+        <view class="start">{{dStart}}</view>
+        <view class="end">{{dEnd}}</view>
       </view>
     </view>
   </view>