阅读页面加音频控件

components/videoPreview/index.wxml

@@ -80,7 +80,7 @@
           disabled="{{currentId != videoInfo.userRead.id}}" catchchange="slider" block-size='12'
           backgroundColor='#ffffff50' selected-color="#ffffff" />
         <view class="time">{{endTime}}</view>
-      </view>0
+      </view>
     </view>
   </view>
   <view class="workFooter" wx:if="{{videoInfo.userRead.status!='CHECK'}}">

pages/reading/index.js

@@ -16,6 +16,9 @@ import {
 import {
   store
 } from '~/store/index'
+import {
+  setDuration
+} from '~/utils/util'
 const aiengine = require('~/utils/ChivoxAiEngine')
 const sha1 = require('~/utils/sha1');
 // 文章行高
@@ -55,7 +58,12 @@ Page({
     readingType: 'public',
     percent: 0,
     uploadState: false,
-    article: []
+    article: [],
+    silderData: {
+      currentTime: '00:00',
+      endTime: '00:00',
+      silderValue: 0
+    }
   },
   onLoad(options) {
     let videoId = options.videoId
@@ -100,6 +108,12 @@ Page({
     });
     this.innerAudioContext = wx.createInnerAudioContext();
     this.resultAudioContext = wx.createInnerAudioContext();
+    this.resultAudioContext.onTimeUpdate(res => {
+      this.setData({
+        ["silderData.sliderValue"]: Math.round(this.resultAudioContext.currentTime / this.resultAudioContext.duration * 100),
+        ["silderData.currentTime"]: setDuration(this.resultAudioContext.currentTime)
+      })
+    })
     this.resultAudioContext.onEnded(res => {
       console.log('102-resultAudioContext.ended');
       this.setData({
@@ -120,6 +134,11 @@ Page({
         this.videoContext.seek(0)
       }
     });
+    this.resultAudioContext.onEnded(res => {
+      this.setData({
+        ["silderData.sliderValue"]: 100
+      })
+    })
   },
   // 获取阅读内容
   async getreadInfo(videoId, reset = false) {
@@ -136,7 +155,8 @@ Page({
     this.setData({
       videoPath: videoInfo.userRead.originVideo,
       article: data,
-      videoInfo
+      videoInfo,
+      ["silderData.endTime"]: setDuration(videoInfo.userRead.duration)
     })
     if (!reset) {
       this.getHeight()
@@ -144,7 +164,6 @@ Page({
     if (this.data.videoInfo.userReadExtend.resourcesType == 0) {
       this.videoContext = wx.createVideoContext('myVideo')
     } else {
-      console.log('走了136');
       this.innerAudioContext.src = videoInfo.userRead.originVideo
       this.innerAudioContext.onEnded(res => {
         console.log("138innerAudioContext触发的");
@@ -405,7 +424,9 @@ Page({
         return this.resultAudioContext.stop()
       }
       this.resultAudioContext.src = this.data.readingReset ? this.data.readDetail.tempFilePath : this.data.videoInfo.userRead.audioPath;
-      this.resultAudioContext.play();
+      setTimeout(() => {
+        this.resultAudioContext.play();
+      }, 200)
       this.setData({
         exampleState: true
       })
@@ -497,6 +518,17 @@ Page({
       this.rowH = rect.height
     }).exec()
   },
+  // 进度条
+  slider({
+    detail
+  }) {
+    this.resultAudioContext.pause();
+    console.log(detail.value / 100 * this.data.videoInfo.userRead.duration)
+    this.resultAudioContext.seek(detail.value / 100 * this.data.videoInfo.userRead.duration)
+    setTimeout(() => {
+      this.resultAudioContext.play()
+    }, 300)
+  },
   onHide() {
     this.resetReading()
   },

pages/reading/index.less

@@ -102,6 +102,34 @@
         animation: identifier 12s infinite linear;
       }
     }
+
+    .progressBar {
+      position: absolute;
+      left: 0px;
+      bottom: 0px;
+      width: 100%;
+      padding: 0rpx 24rpx;
+      box-sizing: border-box;
+      font-size: 0rpx;
+      display: flex;
+      align-items: center;
+
+      .audioSwitch {
+        width: 26rpx;
+        height: 34rpx;
+        padding: 10rpx;
+        margin-right: 20rpx;
+      }
+
+      .time {
+        color: white;
+        font-size: 22rpx;
+      }
+
+      .slider {
+        flex: 1;
+      }
+    }
   }
 
   .contentBox {

pages/reading/index.wxml

@@ -7,16 +7,22 @@
     <video id="myVideo" src="{{videoPath}}" bindended='videoEnd' show-center-play-btn="{{readingReset}}"
       controls="{{!state&&!readingReset}}" muted="{{muted}}"></video>
   </block>
-  <view class="audio" wx:else>
+  <view class="audio" bindtap='videoPlay' wx:else>
     <image src="{{videoInfo.userRead.coverImg}}" class="audioBg" mode="" />
     <view class="mask"></view>
-    <view class="audioPlay" bindtap='videoPlay'
-      style="background-image: url({{videoInfo.userReadExtend.backgroundVirtualImg}});">
+    <view class="audioPlay" style="background-image: url({{videoInfo.userReadExtend.backgroundVirtualImg}});">
       <image src="/static/audioBg.png" class="audioPlayBg {{state?'circle':''}}" />
       <image src="/static/zhen.png" class="audioPlayZhen" />
       <image src="/static/play-btn.png" wx:if="{{!state&&!exampleState}}" class="playBtn" />
       <image src="{{videoInfo.userRead.coverImg}}" class="cover {{state||exampleState?'circle':''}}" mode="" />
     </view>
+    <view class="progressBar">
+      <image src="{{state||exampleState?'/static/aStop.png':'/static/aPlay.png'}}" class="audioSwitch" />
+      <view class="time">{{silderData.currentTime}}</view>
+      <slider class="slider" value="{{silderData.sliderValue}}" catchtap="false" disabled="{{!state&&!exampleState}}"
+        catchchange="slider" block-size='12' backgroundColor='#ffffff50' selected-color="#ffffff" />
+      <view class="time">{{silderData.endTime}}</view>
+    </view>
   </view>
   <view class="contentBox" wx:if="{{!readingReset}}">
     <view class="articleMask"></view>

pages/reading/index.wxss

@@ -91,6 +91,30 @@
 .readingBox .audio .audioPlay .circle {
   animation: identifier 12s infinite linear;
 }
+.readingBox .audio .progressBar {
+  position: absolute;
+  left: 0px;
+  bottom: 0px;
+  width: 100%;
+  padding: 0rpx 24rpx;
+  box-sizing: border-box;
+  font-size: 0rpx;
+  display: flex;
+  align-items: center;
+}
+.readingBox .audio .progressBar .audioSwitch {
+  width: 26rpx;
+  height: 34rpx;
+  padding: 10rpx;
+  margin-right: 20rpx;
+}
+.readingBox .audio .progressBar .time {
+  color: white;
+  font-size: 22rpx;
+}
+.readingBox .audio .progressBar .slider {
+  flex: 1;
+}
 .readingBox .contentBox {
   flex: 1;
   width: 100%;