开发音频阅读页

app.json

@@ -2,6 +2,7 @@
   "pages": [
     "pages/index/index",
     "pages/pkResult/index",
+    "pages/userWorks/index",
     "pages/ranking/index",
     "pages/works/index",
     "pages/collection/index",
@@ -10,7 +11,6 @@
     "pages/score/index",
     "pages/reading/index",
     "pages/pkPage/index",
-    "pages/userWorks/index",
     "pages/my/index",
     "pages/editUser/index",
     "pages/notice/index",

app.wxss

@@ -49,9 +49,11 @@ text {
 .seat {
   padding-bottom: calc(134rpx + env(safe-area-inset-bottom)) !important;
 }
+
 .seat2 {
   padding-bottom: calc(110rpx + env(safe-area-inset-bottom)) !important;
 }
+
 .isFixed {
   position: fixed;
   z-index: 999;
@@ -70,4 +72,19 @@ text {
 .brace {
   /* 高度为一级分类的高度再加一丢丢 */
   height: 260rpx;
+}
+
+/* 转圈动画 */
+@keyframes identifier {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
 }

components/videoPreview/index.js

@@ -194,7 +194,6 @@ Component({
     toPkPage() {
       let videoInfo = this.data.videoInfoCopy
       if (this.properties.videoType == 'pk') {
-        console.log(videoInfo);
         this.setPkData({
           nickName: videoInfo.user.nickName || videoInfo.user.eid,
           avatar: videoInfo.user.avatar,

components/videoPreview/index.less

@@ -252,16 +252,3 @@
   }
 }
 
-@keyframes identifier {
-  0% {
-    transform: rotate(0deg) scale(1);
-  }
-
-  50% {
-    transform: rotate(180deg) scale(1);
-  }
-
-  100% {
-    transform: rotate(360deg) scale(1);
-  }
-}

components/videoPreview/index.wxss

@@ -215,14 +215,3 @@
   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.js

@@ -13,7 +13,7 @@ Component({
     },
     videoType: {
       type: String,
-      // value 为public时是默认公共样式，为my时为“我的”样式，展示下载删除是否公开,pk为pk的样式文案
+      // value 为public时是默认公共样式，为my时为“我的”样式，展示下载删除是否公开,pk为pk的样式文案,collection为收藏时的样式
       value: 'public'
     },
   },

components/worksList/index.wxml

@@ -1,10 +1,8 @@
 <view class="worksList">
   <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">
+    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>
+  <Comment id="comment" tabBarPadding="{{videoType!='my'&&videoType!='collection'?true:false}}" />
+  <canvas id='share' type=" 2d"> </canvas>
 </view>

pages/collection/index.wxml

@@ -1,3 +1,3 @@
 <view class="collection">
-  <worksList id="worksList" worksList="{{list}}" />
+  <worksList id="worksList" videoType='collection' worksList="{{list}}" />
 </view>

pages/index/index.js

@@ -59,7 +59,6 @@ Page({
     this.storeBindings.updateStoreBindings()
   },
   loadMore() {
-    console.log(this.data.userInfo);
     if (this.data.currentType == '1') {
       this.getData(getHotrecommendList, {
         grade: this.data.userInfo.grade

pages/pkResult/index.js

@@ -41,13 +41,13 @@ Page({
     this.innerAudioContext = wx.createInnerAudioContext()
   },
   compareScore() {
-    let pkData = {
-      audioPath: "https://reader-wx.ai160.com/audio/reader/103138024.mp3",
-      avatar: "wxfile://,tmp_ba795553cc21cd941badc3ce06597c245f08fd6a674fe165.jpg",
-      nickName: "小舞",
-      score: 96,
-    }
-    // let pkData = this.data.pkData
+    /*   let pkData = {
+        audioPath: "https://reader-wx.ai160.com/audio/reader/103138024.mp3",
+        avatar: "wxfile://,tmp_ba795553cc21cd941badc3ce06597c245f08fd6a674fe165.jpg",
+        nickName: "小舞",
+        score: 96,
+      } */
+    let pkData = this.data.pkData
     let score = pkData.score
     let myResult = {
       audioPath: this.data.readDetail.tempFilePath,
@@ -55,7 +55,6 @@ Page({
       avatar: this.data.userInfo.avatar,
       score: this.data.readDetail.myOverall
     }
-    console.log(myResult, score);
     this.setData({
       equal: score == myResult.score,
       victory: myResult.score > score ? myResult : pkData,
@@ -133,7 +132,7 @@ Page({
   },
   result() {
     wx.redirectTo({
-      url: `/pages/reading/index?videoId=${this.data.pkData.exampleId}&readingType=pk`,
+      url: `/pages/reading/index?videoId=${this.data.pkData.exampleId}&readingType=pk&reset=true`,
     })
   },
   /**

pages/reading/index.js

@@ -18,6 +18,7 @@ let stl = null
 let setTimeoutObj = null
 // 录音
 let innerAudioContext = null
+let resultAudioContext = null
 /*创建基础引擎*/
 let wsEngine = aiengine.createWsEngine({});
 /*微信录音*/
@@ -102,7 +103,6 @@ Page({
     if (!options.reset) {
       this.getHeight()
     }
-    this.videoContext = wx.createVideoContext('myVideo')
     // 录音授权
     wx.getSetting({
       success(res) {
@@ -134,6 +134,20 @@ Page({
     this.setData({
       videoInfo
     })
+    // if(videoInfo.userReadExtend){
+    if (false) {
+      this.videoContext = wx.createVideoContext('myVideo')
+    } else {
+      this.innerAudioContext = wx.createInnerAudioContext();
+      this.innerAudioContext.src = videoInfo.userRead.audioPath
+      this.innerAudioContext.onEnded(res => {
+        this.finishRecord()
+      })
+      this.innerAudioContext.onStop((res) => {
+        this.finishRecord()
+      });
+    }
+
   },
   // 开始录制
   setCountDown() {
@@ -159,7 +173,7 @@ Page({
           }
         })
         this.soundRecording()
-        this.videoContext.play()
+        this.playMediaState()
         this.startRecording()
       } else {
         this.setData({
@@ -254,8 +268,7 @@ Page({
   // 结束录制
   finishRecord() {
     recorderManager.stop();
-    this.videoContext.stop()
-    this.videoContext.seek(0)
+    this.stopMediaState()
     clearTimeout(this.setTimeoutObj)
     clearInterval(this.stl)
     this.setData({
@@ -270,7 +283,7 @@ Page({
       url: `/pages/pkResult/index`,
     })
   },
-  // 倒计时
+  // 字体换行
   startRecording() {
     if (this.data.currentRow == null) {
       this.setData({
@@ -320,23 +333,42 @@ Page({
     })
   },
   videoPlay() {
+    console.log('触发');
     if (this.data.readingReset) {
-      this.innerAudioContext = wx.createInnerAudioContext();
-      this.innerAudioContext.src = this.data.readDetail.tempFilePath; // 这里可以是录音的临时路径
-      this.innerAudioContext.play();
+      console.log('触发2');
+      this.resultAudioContext = wx.createInnerAudioContext();
+      this.resultAudioContext.src = this.data.readDetail.tempFilePath; // 这里可以是录音的临时路径
+      this.resultAudioContext.play();
     }
   },
   // 清除试听状态
   clearReset() {
-    if (this.innerAudioContext) {
-      this.innerAudioContext.stop()
+    if (this.resultAudioContext) {
+      this.resultAudioContext.stop()
     }
-    this.videoContext.stop()
-    this.videoContext.seek(0)
     this.setData({
       readingReset: false
     })
   },
+  // 控制视频或音频的播放状态
+  playMediaState() {
+    // if(videoInfo.userReadExtend){
+    if (false) {
+      this.videoContext.play()
+    } else {
+      this.innerAudioContext.play();
+    }
+  },
+  // 控制视频或音频的暂停状态
+  stopMediaState() {
+    // if(videoInfo.userReadExtend){
+    if (false) {
+      this.videoContext.stop()
+      this.videoContext.seek(0)
+    } else {
+      this.innerAudioContext.stop()
+    }
+  },
   // 获取设备高度与行高度
   getHeight() {
     var query = wx.createSelectorQuery();

pages/reading/index.less

@@ -20,7 +20,64 @@
     height: 422rpx;
   }
 
+  .audio {
+    position: relative;
+    width: 100%;
+    height: 422rpx;
+
+    .mask {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0px;
+      top: 0px;
+      background-color: rgba(0, 0, 0, 0.5);
+    }
 
+    .audioBg {
+      width: 100%;
+      height: 100%;
+      filter: blur(12px);
+    }
+
+    .audioPlay {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      border-radius: 20rpx;
+      background-color: rgba(0, 0, 0, 0.3);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .audioPlayBg {
+        width: 200rpx;
+        height: 200rpx;
+      }
+
+      .audioPlayZhen {
+        position: absolute;
+        right: 270rpx;
+        top: 118rpx;
+        width: 42rpx;
+        height: 50rpx;
+      }
+
+      .cover {
+        position: absolute;
+        width: 180rpx;
+        height: 180rpx;
+        border-radius: 50%;
+      }
+
+      .circle {
+        animation: identifier 12s infinite linear;
+      }
+    }
+  }
 
   .contentBox {
     flex: 1;

pages/reading/index.wxml

@@ -1,7 +1,18 @@
 <view class="readingBox">
-  <image src="{{videoInfo.userRead.coverImg}}" class='poster' wx:if="{{!state&&!readingReset}}" />
-  <video id="myVideo" src="{{videoInfo.userRead.originVideo}}" bindended='videoEnd' controls="{{false}}"
-    show-center-play-btn="{{readingReset}}" bindplay='videoPlay'></video>
+  <!--  <block>
+    <image src="{{videoInfo.userRead.coverImg}}" class='poster' wx:if="{{!state&&!readingReset}}" />
+    <video id="myVideo" src="{{videoInfo.userRead.originVideo}}" bindended='videoEnd' controls="{{false}}"
+      show-center-play-btn="{{readingReset}}" bindplay='videoPlay'></video>
+  </block> -->
+  <view class="audio" wx:if="{{true}}">
+    <image src="{{videoInfo.userRead.coverImg}}" class="audioBg" mode="" />
+    <view class="mask"></view>
+    <view class="audioPlay">
+      <image src="/static/audioBg.png" class="audioPlayBg {{state?'circle':''}}" />
+      <image src="/static/zhen.png" class="audioPlayZhen" />
+      <image src="{{videoInfo.user.avatar}}" bindtap='videoPlay' class="cover {{state?'circle':''}}" mode="" />
+    </view>
+  </view>
   <view class="contentBox" wx:if="{{!readingReset}}">
     <view class="articleMask"></view>
     <scroll-view class="content" scroll-y enhanced show-scrollbar="{{false}}" scroll-top="{{scrollTop}}"

pages/reading/index.wxss

@@ -18,6 +18,57 @@
   width: 100%;
   height: 422rpx;
 }
+.readingBox .audio {
+  position: relative;
+  width: 100%;
+  height: 422rpx;
+}
+.readingBox .audio .mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0px;
+  top: 0px;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.readingBox .audio .audioBg {
+  width: 100%;
+  height: 100%;
+  filter: blur(12px);
+}
+.readingBox .audio .audioPlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  border-radius: 20rpx;
+  background-color: rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.readingBox .audio .audioPlay .audioPlayBg {
+  width: 200rpx;
+  height: 200rpx;
+}
+.readingBox .audio .audioPlay .audioPlayZhen {
+  position: absolute;
+  right: 270rpx;
+  top: 118rpx;
+  width: 42rpx;
+  height: 50rpx;
+}
+.readingBox .audio .audioPlay .cover {
+  position: absolute;
+  width: 180rpx;
+  height: 180rpx;
+  border-radius: 50%;
+}
+.readingBox .audio .audioPlay .circle {
+  animation: identifier 12s infinite linear;
+}
 .readingBox .contentBox {
   flex: 1;
   width: 100%;

pages/userWorks/index.js

@@ -1,136 +1,19 @@
 import {
-    getSelfRead
+  getSelfRead
 } from '~/api/user'
-import behavior from '~/mixins/video'
-let videoContext = null
+import reachBottom from '~/mixins/reachBottom'
 Page({
-    behaviors: [behavior],
-    data: {
-        list: null,
-        canvasHidden: false, //设置画板的显示与隐藏
-        shareImgPath: '' //用于储存canvas生成的图片
-    },
-    onLoad(options) {
-        this.getSelfRead()
-    },
-    //获取自己作品列表
-    async getSelfRead() {
-        let list = await getSelfRead()
-        this.setData({
-            list
-        })
-    },
-    /* 改变视频播放状态 ,暂时先不用*/
-    changeVideoState() {
-        this.videoContext = wx.createVideoContext('myVideo')
-        let videoState = this.data.videoState
-        if (videoState) {
-            this.videoContext.pause()
-        } else {
-            this.videoContext.play()
-        }
-        this.setData({
-            videoState: !videoState
-        })
-    },
-    creatShare(video) {
-        return new Promise((resolve, reject) => {
-            let context = wx.createSelectorQuery();
-            context
-                .select('#share')
-                .fields({
-                    node: true,
-                    size: true
-                }).exec((res) => {
-                    const canvas = res[0].node;
-                    const ctx = canvas.getContext('2d');
-                    const dpr = wx.getSystemInfoSync().pixelRatio;
-                    canvas.width = res[0].width * dpr;
-                    canvas.height = res[0].height * dpr;
-                    ctx.scale(dpr, dpr);
-                    ctx.font = '14px PingFang';
-                    let pic = canvas.createImage();
-                    pic.src = video.userRead.coverImg; //可以是本地，也可以是网络图片
-                    pic.onload = () => {
-                        ctx.drawImage(pic, 0, 0, 375, 211);
-                    }
-                    let peiyin = canvas.createImage();
-                    peiyin.src = '/static/peiyin.jpg';
-                    peiyin.onload = () => {
-                        ctx.drawImage(peiyin, 0, 211, 375, 89);
-                        // 收藏，一个一个渲染
-                        let sc = canvas.createImage();
-                        sc.src = '/static/star.png'
-                        sc.onload = () => {
-                            ctx.drawImage(sc, 12, 220, 20, 20)
-                            ctx.fillText('收藏', 36, 238)
-                            //分享
-                            let fx = canvas.createImage();
-                            fx.src = '/static/share.png'
-                            fx.onload = () => {
-                                ctx.drawImage(fx, 78, 220, 22, 22)
-                                ctx.fillText('分享', 104, 238)
-                                //点赞
-                                let dz = canvas.createImage();
-                                dz.src = video.isLike ? '/static/heart_colored.png' : '/static/heart.png'
-                                dz.onload = () => {
-                                    ctx.drawImage(dz, 258, 222, 22, 22)
-                                    ctx.fillText(video.userRead.likeAmount, 284, 238)
-                                    //评论
-                                    let pl = canvas.createImage();
-                                    pl.src = '/static/comment.png'
-                                    pl.onload = () => {
-                                        ctx.drawImage(pl, 318, 222, 22, 22)
-                                        ctx.fillText(video.userRead.commentAmount, 340, 238)
-                                        setTimeout(() => {
-                                            wx.canvasToTempFilePath({
-                                                canvas: canvas,
-                                                success(res) {
-                                                    resolve({
-                                                        title: '请欣赏我的课文朗读作品，点赞+评论。',
-                                                        path: `/pages/index/index?readId=${video.userRead.id}&uid=${wx.getStorageSync('uid')}`,
-                                                        imageUrl: res.tempFilePath
-                                                    })
-                                                },
-                                                fail(res) {
-                                                    reject()
-                                                }
-                                            }, this)
-                                        }, 500)
-                                    }
-                                }
-                            }
-                        }
-                    }
+  behaviors: [reachBottom],
+  data: {
 
-                })
-        })
-
-    },
-    onShareAppMessage({
-        from,
-        target
-    }) {
-        if (from == 'button') {
-            let video = target.dataset.info
-            const promise = new Promise(resolve => {
-                this.creatShare(video).then(res => {
-                    resolve(res)
-                })
-            })
-            console.log(video);
-            return {
-                title: '请欣赏我的课文朗读作品，点赞+评论。',
-                path: `/pages/index/index?readId=${video.userRead.id}&uid=${wx.getStorageSync('uid')}`,
-                imageUrl: video.userRead.coverImg,
-                promise
-            }
-        } else {
-            return {
-                title: '课文朗读，从未如此有趣。',
-                path: `/pages/index/index?&uid=${wx.getStorageSync('uid')}`,
-                imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
-            }
-        }
-    }
+  },
+  onLoad(options) {
+    this.loadMore()
+  },
+  loadMore() {
+    this.getData(getSelfRead)
+  },
+  onReachBottom() {
+    this.loadMore()
+  },
 })

pages/userWorks/index.json

@@ -1,8 +1,7 @@
 {
   "usingComponents": {
-    "videoPreview": "/components/videoPreview/index",
-    "emptyBg": "/components/empty/index",
-    "Comment": "/components/comment/index"
+    "worksList": "/components/worksList/index",
+    "emptyBg": "/components/empty/index"
   },
   "navigationBarTitleText": "我的作品",
   "enablePullDownRefresh": false

pages/userWorks/index.wxml

@@ -1,12 +1,6 @@
 <view class="worksBox">
-    <!-- 作品列表 -->
-    <canvas id='share' type="2d"> </canvas>
-    <block wx:if="{{list.length>0}}">
-        <videoPreview wx:for="{{list}}" videoType='my' wx:key="index" videoInfo="{{item}}" currentId="{{currentId}}"
-            data-id="{{item.userRead.id}}" bind:playVideo="playVideo" bind:getList="getSelfRead"
-            bind:openComment="openComment">
-        </videoPreview>
-    </block>
-    <emptyBg wx:if="{{list.length==0}}" message='您还没有作品哦，赶快去发表吧！'></emptyBg>
-    <Comment id="comment" />
+  <!-- 作品列表 -->
+  <canvas id='share' type="2d"> </canvas>
+  <worksList id="worksList" videoType='my' worksList="{{list}}" />
+  <emptyBg wx:if="{{list.length==0}}" message='您还没有作品哦，赶快去发表吧！'></emptyBg>
 </view>

pages/works/index.js

@@ -58,7 +58,6 @@ Page({
    * 监听页面滚动事件
    */
   onPageScroll(e) {
-    console.log(e.scrollTop);
     if (e.scrollTop >= 110 && !this.data.isFixed) {
       this.setData({
         isFixed: true

project.private.config.json

@@ -12,7 +12,7 @@
         {
           "name": "",
           "pathName": "pages/reading/index",
-          "query": "videoId=10312700101&readingType=pk",
+          "query": "videoId=1610706272474934&readingType=pk",
           "launchMode": "default",
           "scene": null
         },
@@ -29,6 +29,13 @@
           "query": "detail={\"integrity\":12,\"tone\":50,\"accuracy\":8,\"fluency\":0,\"myOverall\":12,\"title\":\"秋天\"}",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/pkPage/index",
+          "query": "videoId=1615388015564598",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }