开发音频播放器

components/activityList/index.wxml

@@ -67,10 +67,10 @@
         </view>
       </view>
     </view>
-    <view class="ranking-class-2 {{item.type=='1'?'yxb':item.type=='3'?'rbb':'pkb'}}" wx:if="{{item.bannerType==3}}">
+    <view class="ranking-class-2 {{item.type=='2'?'yxb':item.type=='3'?'rbb':'pkb'}}" wx:if="{{item.bannerType==3}}">
       <view class="header">
         <view class="left">
-          <image src="{{item.type=='1'?'/static/yxb.png':item.type=='3'?'/static/rbb.png':'/static/pkb.png'}}"
+          <image src="{{item.type=='2'?'/static/yxb.png':item.type=='3'?'/static/rbb.png':'/static/pkb.png'}}"
             class="icon" />
           <view class="title">{{item.title}}</view>
         </view>

components/videoPreview/index.js

@@ -48,11 +48,15 @@ Component({
     },
     currentId: {
       type: Number
+    },
+    sliderValue: {
+      type: Number,
+      value: 0
     }
   },
   data: {
     selfUid: wx.getStorageSync('uid'),
-    videoInfoCopy: {}
+    videoInfoCopy: {},
   },
   methods: {
     // 播放视频
@@ -60,7 +64,9 @@ Component({
       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
@@ -232,6 +238,7 @@ Component({
     },
     // 控制音频播放
     audioPlay() {
+      console.log('zzzz');
       this.triggerEvent('playAudio')
       this.submitPlayLog(this.properties.videoInfo.userRead.id)
     },

components/videoPreview/index.less

@@ -124,11 +124,10 @@
 
       .play {
         position: absolute;
-        left: 50%;
-        top: 40%;
-        width: 90rpx;
-        height: 90rpx;
-        transform: translate(-50%);
+        left: 20rpx;
+        bottom: 15rpx;
+        width: 70rpx;
+        height: 70rpx;
       }
 
       .cover {
@@ -154,23 +153,11 @@
 
     .audioBox {
       position: relative;
-      height: 208rpx;
+      height: 270rpx;
       overflow: hidden;
       display: flex;
       align-items: center;
 
-      .readingTips {
-        position: absolute;
-        right: 14rpx;
-        bottom: 14rpx;
-        width: 32rpx;
-        height: 32rpx;
-        z-index: 2;
-        background-color: rgba(0, 0, 0, 0.28);
-        padding: 12rpx;
-        border-radius: 50%;
-
-      }
 
       .audioBg {
         position: absolute;
@@ -178,9 +165,19 @@
         height: 100%;
       }
 
+      .titleBox {
+        position: relative;
+        margin-left: 80rpx;
+        margin-right: 30rpx;
+        width: 320rpx;
+        font-size: 36rpx;
+        line-height: 54rpx;
+        color: white;
+        text-align: center;
+      }
+
       .audioPlay {
         position: relative;
-        margin: 20rpx 10rpx 20rpx 120rpx;
         width: 220rpx;
         height: 174rpx;
         display: flex;
@@ -212,13 +209,32 @@
         }
       }
 
-      .titleBox {
-        position: relative;
-        width: 256rpx;
-        font-size: 30rpx;
-        line-height: 54rpx;
-        color: white;
-        text-align: center;
+      .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;
+        }
       }
     }
   }

components/videoPreview/index.wxml

@@ -34,7 +34,7 @@
     </view>
     <view class="wH-right" wx:elif="{{videoType=='pk'}}">
       <view class="pkNum">
-        {{videoInfoCopy.userRead.score?videoInfoCopy.userRead.score+'分':''}}
+        {{videoInfoCopy.userRead.score>=0?videoInfoCopy.userRead.score+'分':''}}
       </view>
     </view>
   </view>
@@ -64,19 +64,24 @@
   <!-- 音频 -->
   <view class="workContent" wx:else>
     <view class="audioBox" bindtap="audioPlay">
-      <image src="/static/readingNow.gif" class="readingTips" wx:if="{{videoInfoCopy.userRead.id==currentId}}" />
       <image src=" {{videoInfoCopy.userReadExtend.backgroundVirtualImg}}" class="audioBg" mode="aspectFill" />
+      <view class="titleBox">
+        {{videoInfoCopy.userRead.title}}
+      </view>
       <view class="audioPlay">
         <image src="/static/audioBg.png" class="audioPlayBg {{videoInfoCopy.userRead.id==currentId?'circle':''}}" />
         <image src="/static/zhen.png" class="audioPlayZhen" />
         <image src="{{videoInfoCopy.userRead.coverImg}}"
           class="cover {{videoInfoCopy.userRead.id==currentId?'circle':''}}" />
       </view>
-      <view class="titleBox">
-        <view class="textOver" wx:for="{{videoInfoCopy.userRead.title}}" wx:key="index">
-          {{item}}
-        </view>
-      </view>
+      <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>0
     </view>
   </view>
   <view class="workFooter" wx:if="{{videoInfo.userRead.status!='CHECK'}}">

components/videoPreview/index.wxss

@@ -108,11 +108,10 @@
 }
 .work .workContent .videoBox .play {
   position: absolute;
-  left: 50%;
-  top: 40%;
-  width: 90rpx;
-  height: 90rpx;
-  transform: translate(-50%);
+  left: 20rpx;
+  bottom: 15rpx;
+  width: 70rpx;
+  height: 70rpx;
 }
 .work .workContent .videoBox .cover {
   width: 100%;
@@ -133,30 +132,28 @@
 }
 .work .workContent .audioBox {
   position: relative;
-  height: 208rpx;
+  height: 270rpx;
   overflow: hidden;
   display: flex;
   align-items: center;
 }
-.work .workContent .audioBox .readingTips {
-  position: absolute;
-  right: 14rpx;
-  bottom: 14rpx;
-  width: 32rpx;
-  height: 32rpx;
-  z-index: 2;
-  background-color: rgba(0, 0, 0, 0.28);
-  padding: 12rpx;
-  border-radius: 50%;
-}
 .work .workContent .audioBox .audioBg {
   position: absolute;
   width: 100%;
   height: 100%;
 }
+.work .workContent .audioBox .titleBox {
+  position: relative;
+  margin-left: 80rpx;
+  margin-right: 30rpx;
+  width: 320rpx;
+  font-size: 36rpx;
+  line-height: 54rpx;
+  color: white;
+  text-align: center;
+}
 .work .workContent .audioBox .audioPlay {
   position: relative;
-  margin: 20rpx 10rpx 20rpx 120rpx;
   width: 220rpx;
   height: 174rpx;
   display: flex;
@@ -183,13 +180,29 @@
 .work .workContent .audioBox .audioPlay .circle {
   animation: identifier 12s infinite linear;
 }
-.work .workContent .audioBox .titleBox {
-  position: relative;
-  width: 256rpx;
-  font-size: 30rpx;
-  line-height: 54rpx;
+.work .workContent .audioBox .progressBar {
+  position: absolute;
+  left: 0px;
+  bottom: 0px;
+  width: 100%;
+  padding: 0rpx 24rpx;
+  box-sizing: border-box;
+  font-size: 0rpx;
+  display: flex;
+  align-items: center;
+}
+.work .workContent .audioBox .progressBar .audioSwitch {
+  width: 26rpx;
+  height: 34rpx;
+  padding: 10rpx;
+  margin-right: 20rpx;
+}
+.work .workContent .audioBox .progressBar .time {
   color: white;
-  text-align: center;
+  font-size: 22rpx;
+}
+.work .workContent .audioBox .progressBar .slider {
+  flex: 1;
 }
 .work .workFooter {
   display: flex;

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}}"
-    videoInfo="{{item}}" index='{{index}}' currentId="{{currentId}}" data-id="{{item.userRead.id}}"
-    data-audio="{{item.userRead.audioPath}}"
+    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,6 +1,8 @@
+let innerAudioContext
 module.exports = Behavior({
   data: {
     currentId: '',
+    sliderValue: 0
   },
   properties: {},
   pageLifetimes: {
@@ -8,6 +10,20 @@ module.exports = Behavior({
       this.resetAudio()
     },
   },
+  lifetimes: {
+    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)
+        })
+      })
+      this.innerAudioContext.onEnded(res => {
+        this.resetAudio()
+      })
+    }
+  },
   methods: {
     // 开始播放
     playVideo({
@@ -26,14 +42,19 @@ module.exports = Behavior({
       }
       if (this.innerAudioContext) {
         this.resetAudio()
-      } else {
-        this.innerAudioContext = wx.createInnerAudioContext()
-        this.innerAudioContext.onEnded(res => {
-          this.resetAudio()
-        })
       }
+      /* else {
+             this.innerAudioContext = wx.createInnerAudioContext()
+             this.innerAudioContext.onEnded(res => {
+               this.resetAudio()
+             })
+           } */
       this.innerAudioContext.src = currentTarget.dataset.audio
-      this.innerAudioContext.play();
+      // this.innerAudioContext.onCanplay(() => {
+      setTimeout(() => {
+        this.innerAudioContext.play();
+      }, 100)
+      // })
       this.setData({
         currentId: currentTarget.dataset.id
       })