开发音频播放功能

components/videoPreview/index.js

@@ -135,7 +135,7 @@ Component({
     },
     //评论
     openComment() {
-      this.triggerEvent('openComment', this.properties.videoInfo.userRead.id)
+      this.triggerEvent('openComment')
     },
     // 删除
     delete() {
@@ -216,8 +216,7 @@ Component({
     },
     // 控制音频播放
     audioPlay() {
-      console.log(this.data.videoInfoCopy);
-      this.triggerEvent('playVideo', this.properties.videoInfo.userRead.id)
+      this.triggerEvent('playAudio')
     }
   }
 })

components/videoPreview/index.less

@@ -196,6 +196,10 @@
           height: 130rpx;
           border-radius: 50%;
         }
+    
+        .circle {
+          animation: identifier 12s infinite linear;
+        }
       }
     }
   }
@@ -246,4 +250,18 @@
       margin-left: 12rpx;
     }
   }
+}
+
+@keyframes identifier {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+
+  50% {
+    transform: rotate(180deg) scale(1);
+  }
+
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
 }

components/videoPreview/index.wxml

@@ -38,7 +38,7 @@
     </view>
   </view>
   <!-- 视频 -->
-  <view class="workContent" wx:if="{{else}}">
+  <view class="workContent">
     <!-- 审核中遮罩 -->
     <view class="videoBox" wx:if="{{videoInfoCopy.userRead.status=='CHECK'&&videoInfoCopy.userRead.id!=currentId}}">
       <view class="maskBg"></view>
@@ -57,14 +57,15 @@
     </video>
   </view>
   <!-- 音频 -->
-  <view class="workContent">
+  <view class="workContent" wx:if="{{else}}">
     <view class="audioBox">
       <image src="{{videoInfoCopy.userRead.coverImg}}" class="audioBg" mode="" />
       <view class="mask"></view>
       <view class="audioPlay" bindtap="audioPlay">
-        <image src="/static/audioBg.png" class="audioPlayBg" />
+        <image src="/static/audioBg.png" class="audioPlayBg {{videoInfoCopy.userRead.id==currentId?'circle':''}}" />
         <image src="/static/zhen.png" class="audioPlayZhen" />
-        <image src="{{videoInfoCopy.user.avatar}}" class="cover" mode="" />
+        <image src="{{videoInfoCopy.user.avatar}}" class="cover {{videoInfoCopy.userRead.id==currentId?'circle':''}}"
+          mode="" />
       </view>
     </view>
   </view>

components/videoPreview/index.wxss

@@ -172,6 +172,9 @@
   height: 130rpx;
   border-radius: 50%;
 }
+.work .workContent .audioBox .audioPlay .circle {
+  animation: identifier 12s infinite linear;
+}
 .work .workFooter {
   margin-top: 15rpx;
   display: flex;
@@ -212,3 +215,14 @@
   font-size: 30rpx;
   margin-left: 12rpx;
 }
+@keyframes identifier {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  50% {
+    transform: rotate(180deg) scale(1);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}

components/worksList/index.wxml

@@ -1,7 +1,9 @@
 <view class="worksList">
-  <videoPreview wx:for="{{worksListCopy}}" wx:key="index" videoType="{{videoType}}" videoInfo="{{item}}" index='{{index}}'
-    currentId="{{currentId}}" data-id="{{item.userRead.id}}" bind:playVideo="playVideo" bind:openComment="openComment"
-    bind:setListFans="setListFans">
+  <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}}"
+    bind:playVideo="playVideo"
+    bind:openComment="openComment" bind:setListFans="setListFans" bind:playAudio="playAudio">
   </videoPreview>
   <Comment id="comment" tabBarPadding='{{true}}' />
   <canvas id='share' type="2d"> </canvas>

mixins/video.js

@@ -1,7 +1,6 @@
 module.exports = Behavior({
   data: {
     currentId: '',
-    videoState: true,
   },
   properties: {},
   methods: {
@@ -10,7 +9,33 @@ module.exports = Behavior({
       currentTarget
     }) {
       this.setData({
-        videoState: true,
+        currentId: currentTarget.dataset.id
+      })
+    },
+    playAudio({
+      currentTarget
+    }) {
+      if (this.data.currentId == currentTarget.dataset.id) {
+        return this.innerAudioContext.stop();
+      }
+      if (this.innerAudioContext) {
+        this.innerAudioContext.stop();
+      } else {
+        this.innerAudioContext = wx.createInnerAudioContext()
+        this.innerAudioContext.onEnded(res => {
+          this.setData({
+            currentId: ''
+          })
+        })
+        this.innerAudioContext.onStop((res) => {
+          this.setData({
+            currentId: ''
+          })
+        });
+      }
+      this.innerAudioContext.src = currentTarget.dataset.audio
+      this.innerAudioContext.play();
+      this.setData({
         currentId: currentTarget.dataset.id
       })
     },

pages/pkPage/index.js

@@ -12,7 +12,6 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-    console.log('销毁了');
     let videoId = options.videoId
     this.getreadInfo(videoId)
   },