开发音频进度条组件

components/videoPreview/index.js

@@ -13,7 +13,9 @@ import {
 import {
   setFans
 } from '~/api/user'
-
+import {
+  setDuration
+} from '~/utils/util'
 Component({
   behaviors: [storeBindingsBehavior],
   storeBindings: {
@@ -33,9 +35,9 @@ Component({
       type: Object,
       value: {},
       observer(newVal) {
-        if (newVal.userReadExtend && newVal.userReadExtend.resourcesType == 1) {
-          newVal.userRead.title = newVal.userRead.title.split('\n')
-        }
+        /*   if (newVal.userReadExtend && newVal.userReadExtend.resourcesType == 1) {
+            newVal.userRead.title = newVal.userRead.title.split('\n')
+          } */
         this.setData({
           videoInfoCopy: newVal
         })
@@ -51,22 +53,36 @@ Component({
     },
     sliderValue: {
       type: Number,
-      value: 0
+      value: 0,
+    },
+    currentTime: {
+      type: String,
+      value: '00:00',
     }
   },
   data: {
     selfUid: wx.getStorageSync('uid'),
     videoInfoCopy: {},
   },
+  lifetimes: {
+    attached() {
+      let {
+        userReadExtend,
+        userRead
+      } = this.data.videoInfoCopy
+      if (userReadExtend.resourcesType == 1) {
+        this.setData({
+          endTime: setDuration(userRead.duration)
+        })
+      }
+    }
+  },
   methods: {
     // 播放视频
     playVideo() {
       this.triggerEvent('playVideo', this.properties.videoInfo.userRead.id)
       this.submitPlayLog(this.properties.videoInfo.userRead.id)
     },
-    slider(v) {
-      console.log(v);
-    },
     // 设置视频公开还是隐私
     async setVideoPublic() {
       let info = this.properties.videoInfo.userRead
@@ -238,7 +254,6 @@ Component({
     },
     // 控制音频播放
     audioPlay() {
-      console.log('zzzz');
       this.triggerEvent('playAudio')
       this.submitPlayLog(this.properties.videoInfo.userRead.id)
     },

components/videoPreview/index.wxml

@@ -77,10 +77,10 @@
       <view class="progressBar">
         <image src="{{videoInfoCopy.userRead.id==currentId?'/static/aStop.png':'/static/aPlay.png'}}"
           class="audioSwitch" />
-        <view class="time">00:00</view>
-        <slider class="slider" value="{{sliderValue}}" catchtap="false" catchchange="slider" block-size='12'
-          backgroundColor='#ffffff50' selected-color="#ffffff" />
-        <view class="time">00:00</view>
+        <view class="time">{{currentId == videoInfoCopy.userRead.id?currentTime:'00:00'}}</view>
+        <slider class="slider" value="{{currentId == videoInfoCopy.userRead.id?sliderValue:0}}" catchtap="false"
+          catchchange="slider" block-size='12' backgroundColor='#ffffff50' selected-color="#ffffff" />
+        <view class="time">{{endTime}}</view>
       </view>0
     </view>
   </view>

components/worksList/index.js

@@ -31,7 +31,7 @@ Component({
                 if (res.dataset.type == 0) {
                   this.resetAudio();
                   this.setData({
-                    currentId: res.dataset.id
+                    currentId: res.dataset.id,
                   })
                 } else {
                   this.playAudio({

components/worksList/index.wxml

@@ -1,8 +1,8 @@
 <view class="worksList">
   <view class="playLine" />
   <videoPreview class="videoPreview" wx:for="{{worksListCopy}}" wx:key="index" videoType="{{videoType}}"
-    sliderValue="{{sliderValue}}" videoInfo="{{item}}" index='{{index}}' currentId="{{currentId}}"
-    data-id="{{item.userRead.id}}" data-audio="{{item.userRead.audioPath}}"
+    currentTime="{{currentTime}}" sliderValue="{{sliderValue}}" videoInfo="{{item}}" index='{{index}}'
+    currentId="{{currentId}}" data-id="{{item.userRead.id}}" data-audio="{{item.userRead.audioPath}}"
     data-type="{{!item.userReadExtend||item.userReadExtend.resourcesType==0?0:1}}" bind:openComment="openComment"
     bind:setListFans="setListFans" bind:playAudio="playAudio" bind:playVideo="playVideo" bind:deleteVideo='deleteVideo'>
   </videoPreview>

mixins/video.js

@@ -1,4 +1,7 @@
 let innerAudioContext
+import {
+  setDuration
+} from '~/utils/util'
 module.exports = Behavior({
   data: {
     currentId: '',
@@ -14,9 +17,9 @@ module.exports = Behavior({
     attached() {
       this.innerAudioContext = wx.createInnerAudioContext()
       this.innerAudioContext.onTimeUpdate(res => {
-        console.log(Math.round(this.innerAudioContext.currentTime / this.innerAudioContext.duration * 100));
         this.setData({
-          sliderValue: Math.round(this.innerAudioContext.currentTime / this.innerAudioContext.duration * 100)
+          sliderValue: Math.round(this.innerAudioContext.currentTime / this.innerAudioContext.duration * 100),
+          currentTime: setDuration(this.innerAudioContext.currentTime)
         })
       })
       this.innerAudioContext.onEnded(res => {
@@ -53,8 +56,9 @@ module.exports = Behavior({
       // this.innerAudioContext.onCanplay(() => {
       setTimeout(() => {
         this.innerAudioContext.play();
-      }, 100)
+      }, 500)
       // })
+
       this.setData({
         currentId: currentTarget.dataset.id
       })
@@ -65,7 +69,8 @@ module.exports = Behavior({
         this.innerAudioContext.stop();
       }
       this.setData({
-        currentId: ''
+        currentId: '',
+        sliderValue: 0
       })
     },
     // 打开评论

pages/pkResult/index.js

@@ -1,6 +1,9 @@
 import {
   getPkResult
 } from '~/api/works'
+import {
+  setDuration
+} from '~/utils/util'
 let innerAudioContext
 Page({
 
@@ -52,8 +55,8 @@ Page({
       equal: first.userRead.score == second.userRead.score,
       victory: first.userRead.score > second.userRead.score ? first : second,
       defeated,
-      vEnd: this.setDuration(victory.userRead.duration),
-      dEnd: this.setDuration(defeated.userRead.duration),
+      vEnd:setDuration(victory.userRead.duration),
+      dEnd: setDuration(defeated.userRead.duration),
     })
   },
   playAudio({
@@ -102,29 +105,29 @@ Page({
       let label = this.data.currentType == 'victory' ? 'vStart' : 'dStart'
       let progressV = this.data.currentType == 'victory' ? 'vProgress' : 'dProgress'
       this.setData({
-        [label]: this.setDuration(this.innerAudioContext.currentTime),
+        [label]: setDuration(this.innerAudioContext.currentTime),
         [progressV]: Math.round((this.innerAudioContext.currentTime / this.innerAudioContext.duration) * 100)
       })
     })
   },
-  // 设置时间文案
-  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";
+  /*   // 设置时间文案
+    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;
       }
-      t += sec;
-    }
-    return t
-  },
+      return t
+    }, */
   result({
     currentTarget
   }) {

utils/util.js

@@ -13,7 +13,25 @@ const formatNumber = n => {
   n = n.toString()
   return n[1] ? n : `0${n}`
 }
-
-module.exports = {
-  formatTime
+// 设置时间文案
+const 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;
+  }
+  return t
 }
+module.exports = {
+  formatTime,
+  setDuration
+}