处理不同条件下的分享canvas

components/uploadFile/index.js

@@ -1,107 +1,109 @@
 import {
-    storeBindingsBehavior
+  storeBindingsBehavior
 } from 'mobx-miniprogram-bindings'
 import {
-    store
+  store
 } from '~/store/index'
 import {
-    publishWorks,
-    postWorksScore,
-    publishRankWorks
+  publishWorks,
+  postWorksScore,
+  publishRankWorks
 } from '~/api/works'
 Component({
-    behaviors: [storeBindingsBehavior],
-    storeBindings: {
-        store,
-        fields: {
-            readDetail: 'readDetail'
+  behaviors: [storeBindingsBehavior],
+  storeBindings: {
+    store,
+    fields: {
+      readDetail: 'readDetail'
+    },
+    actions: {
+      setReadDetail: 'setReadDetail'
+    }
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    readingType: ''
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    tempFilePath: '',
+    uploadFlag: false,
+    uploadSuccess: false,
+    // 是否上传过
+    uploadState: false,
+    percent: 0,
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    upload() {
+      if (this.data.uploadState) {
+        return
+      }
+      this.setData({
+        uploadFlag: true,
+        uploadState: true
+      })
+      const uploadTask = wx.uploadFile({
+        url: 'https://reader-api.ai160.com//file/upload',
+        filePath: this.data.readDetail.tempFilePath,
+        name: '朗读录音',
+        header: {
+          uid: wx.getStorageSync('uid')
+        },
+        success: (res) => {
+          const formateRes = JSON.parse(res.data);
+          let audioPath = formateRes.data;
+          this.uploadWorks(audioPath);
+          this.setData({
+            uploadSuccess: true,
+          })
         },
-        actions: {
-            setReadDetail: 'setReadDetail'
+        complete: () => {
+          this.setData({
+            uploadFlag: false
+          })
         }
+      })
+      uploadTask.onProgressUpdate((res) => {
+        this.setData({
+          percent: res.progress
+        })
+      })
     },
-    /**
-     * 组件的属性列表
-     */
-    properties: {
-        readingType: ''
-    },
-    /**
-     * 组件的初始数据
-     */
-    data: {
-        tempFilePath: '',
-        uploadFlag: false,
-        uploadSuccess: false,
-        // 是否上传过
-        uploadState: false,
-        percent: 0,
+    cancelMask() {
+      this.setData({
+        uploadSuccess: false
+      })
     },
-    /**
-     * 组件的方法列表
-     */
-    methods: {
-        upload() {
-            if (this.data.uploadState) {
-                return
-            }
-            this.setData({
-                uploadFlag: true,
-                uploadState: true
-            })
-            const uploadTask = wx.uploadFile({
-                url: 'https://reader-api.ai160.com//file/upload',
-                filePath: this.data.readDetail.tempFilePath,
-                name: '朗读录音',
-                header: {
-                    uid: wx.getStorageSync('uid')
-                },
-                success: (res) => {
-                    const formateRes = JSON.parse(res.data);
-                    let audioPath = formateRes.data;
-                    this.uploadWorks(audioPath);
-                    this.setData({
-                        uploadSuccess: true,
-                    })
-                },
-                complete: () => {
-                    this.setData({
-                        uploadFlag: false
-                    })
-                }
-            })
-            uploadTask.onProgressUpdate((res) => {
-                this.setData({
-                    percent: res.progress
-                })
-            })
-        },
-        cancelMask() {
-            this.setData({
-                uploadSuccess: false
-            })
-        },
-        async uploadWorks(audio) {
-            const data = {
-                "exampleId": this.data.readDetail.id,
-                "audioPath": audio,
-                "originVideo": this.data.readDetail.originVideo,
-            };
-            let res
-            if (!this.properties.readingType) {
-                res = await publishWorks(data)
-            } else {
-                res = await publishRankWorks(data)
-            }
-            let _data = this.data.readDetail
-            await postWorksScore({
-                "userReadId": res.id,
-                "complete": _data.integrity,
-                "accuracy": _data.accuracy,
-                "speed": _data.fluency,
-                "intonation": _data.tone,
-                "score": _data.myOverall
-            })
-        },
+    async uploadWorks(audio) {
+      const data = {
+        "exampleId": this.data.readDetail.id,
+        "audioPath": audio,
+        "originVideo": this.data.readDetail.originVideo,
+      };
+      let res
+      if (!this.properties.readingType) {
+        res = await publishWorks(data)
+      } else {
+        res = await publishRankWorks(data)
+      }
+      wx.setStorageSync('shareVideoId', res.id)
+      console.log(res, 'rrrrrrrr');
+      let _data = this.data.readDetail
+      await postWorksScore({
+        "userReadId": res.id,
+        "complete": _data.integrity,
+        "accuracy": _data.accuracy,
+        "speed": _data.fluency,
+        "intonation": _data.tone,
+        "score": _data.myOverall
+      })
     },
+  },
 })

components/videoPreview/index.less

@@ -1,261 +1,261 @@
 .work {
-    margin-bottom: 24rpx;
-    background-color: white;
-    border-radius: 32rpx;
-    box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
-    padding-bottom: 20rpx;
-
-    .workHead {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 20rpx;
-
-        .wH-left {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .avatar {
-                width: 80rpx;
-                height: 80rpx;
-                border-radius: 50%;
-                overflow: hidden;
-                background-color: rgb(228, 225, 225);
-            }
-
-            .wH-left-user {
-                margin-left: 18rpx;
-
-                .nickname {
-                    max-width: 320rpx;
-                    font-size: 30rpx;
-                    font-weight: bold;
-                    color: #000;
-                }
-
-                .time {
-                    margin-top: 4rpx;
-                    font-size: 26rpx;
-                    color: rgba(0, 0, 0, 0.6);
-                }
-            }
+  margin-bottom: 24rpx;
+  background-color: white;
+  border-radius: 32rpx;
+  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
+  padding-bottom: 20rpx;
+
+  .workHead {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20rpx;
+
+    .wH-left {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .avatar {
+        width: 80rpx;
+        height: 80rpx;
+        border-radius: 50%;
+        overflow: hidden;
+        background-color: rgb(228, 225, 225);
+      }
+
+      .wH-left-user {
+        margin-left: 18rpx;
+
+        .nickname {
+          max-width: 320rpx;
+          font-size: 30rpx;
+          font-weight: bold;
+          color: #000;
         }
 
-        .wH-right {
-            display: flex;
-            align-items: center;
-
-            .wH-right-btn {
-                text-align: center;
-                margin-right: 30rpx;
-
-                .img {
-                    width: 27rpx;
-                    height: 32rpx;
-                }
-
-                .text {
-                    font-size: 26rpx;
-                    color: rgba(0, 0, 0, 0.74);
-                }
-            }
-
-            .follow {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 140rpx;
-                font-size: 24rpx;
-                padding: 8rpx 0rpx;
-                border-radius: 50rpx;
-                border: 1rpx solid #1BC665;
-                color: #1BC665;
-
-                .character {
-                    width: 22rpx;
-                    height: 22rpx;
-                    margin-right: 6rpx;
-                }
-            }
-
-            .isFans {
-                border: 1rpx solid #969696;
-                color: #969696;
-            }
-
-            .pkNum {
-                color: #30C866;
-                font-size: 44rpx;
-                margin-right: 20rpx;
-            }
+        .time {
+          margin-top: 4rpx;
+          font-size: 26rpx;
+          color: rgba(0, 0, 0, 0.6);
         }
+      }
     }
 
-    .workContent {
-        font-size: 0px;
-
-        .videoBox {
-            position: relative;
-            width: 100%;
-            height: 422rpx;
-
-            .maskBg {
-                position: absolute;
-                top: 0px;
-                left: 0px;
-                width: 100%;
-                height: 100%;
-                background-color: rgba(0, 0, 0, 0.5);
-            }
-
-            .maskImg {
-                z-index: 10;
-                width: 215rpx;
-                height: 215rpx;
-                position: absolute;
-                top: 0px;
-                right: 0px;
-                left: 0px;
-                bottom: 0px;
-                margin: auto;
-            }
-
-            .play {
-                position: absolute;
-                left: 50%;
-                top: 40%;
-                width: 90rpx;
-                height: 90rpx;
-                transform: translate(-50%);
-            }
-
-            .cover {
-                width: 100%;
-                height: 100%;
-            }
-        }
+    .wH-right {
+      display: flex;
+      align-items: center;
+
+      .wH-right-btn {
+        text-align: center;
+        margin-right: 30rpx;
 
-        .video {
-            width: 100%;
-            height: 422rpx;
+        .img {
+          width: 27rpx;
+          height: 32rpx;
         }
 
-        .audioBox {
-            position: relative;
-            height: 208rpx;
-            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;
-                width: 100%;
-                height: 100%;
-            }
-
-            .audioPlay {
-                position: relative;
-                margin: 20rpx 10rpx 20rpx 120rpx;
-                width: 220rpx;
-                height: 174rpx;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-
-                .audioPlayBg {
-                    width: 150rpx;
-                    height: 150rpx;
-                }
-
-                .audioPlayZhen {
-                    position: absolute;
-                    right: 30rpx;
-                    top: 16rpx;
-                    width: 32rpx;
-                    height: 40rpx;
-                }
-
-                .cover {
-                    position: absolute;
-                    width: 130rpx;
-                    height: 130rpx;
-                    border-radius: 50%;
-                }
-
-                .circle {
-                    animation: identifier 12s infinite linear;
-                }
-            }
-
-            .titleBox {
-                position: relative;
-                width: 256rpx;
-                font-size: 30rpx;
-                line-height: 54rpx;
-                color: white;
-                text-align: center;
-            }
+        .text {
+          font-size: 26rpx;
+          color: rgba(0, 0, 0, 0.74);
         }
-    }
+      }
 
-    .workFooter {
-        margin-top: 15rpx;
+      .follow {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        padding: 14rpx 20rpx 30rpx;
-
-        .mangeL-box {
-            display: flex;
-            align-items: center;
-            margin-right: 30rpx;
-
-            .icon {
-                width: 44rpx;
-                height: 44rpx;
-            }
-
-            .icon-name {
-                margin-left: 8rpx;
-                font-size: 28rpx;
-            }
+        justify-content: center;
+        width: 140rpx;
+        font-size: 24rpx;
+        padding: 8rpx 0rpx;
+        border-radius: 50rpx;
+        border: 1rpx solid #1BC665;
+        color: #1BC665;
+
+        .character {
+          width: 22rpx;
+          height: 22rpx;
+          margin-right: 6rpx;
         }
+      }
+
+      .isFans {
+        border: 1rpx solid #969696;
+        color: #969696;
+      }
+
+      .pkNum {
+        color: #30C866;
+        font-size: 44rpx;
+        margin-right: 20rpx;
+      }
+    }
+  }
+
+  .workContent {
+    font-size: 0px;
+
+    .videoBox {
+      position: relative;
+      width: 100%;
+      height: 422rpx;
+
+      .maskBg {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+
+      .maskImg {
+        z-index: 10;
+        width: 215rpx;
+        height: 215rpx;
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        left: 0px;
+        bottom: 0px;
+        margin: auto;
+      }
+
+      .play {
+        position: absolute;
+        left: 50%;
+        top: 40%;
+        width: 90rpx;
+        height: 90rpx;
+        transform: translate(-50%);
+      }
+
+      .cover {
+        width: 100%;
+        height: 100%;
+      }
     }
 
-    .toReading {
-        width: 166rpx;
-        margin: 0 auto;
+    .video {
+      width: 100%;
+      height: 422rpx;
+    }
+
+    .audioBox {
+      position: relative;
+      height: 208rpx;
+      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;
+        width: 100%;
+        height: 100%;
+      }
+
+      .audioPlay {
+        position: relative;
+        margin: 20rpx 10rpx 20rpx 120rpx;
+        width: 220rpx;
+        height: 174rpx;
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 12rpx 32rpx;
-        border-radius: 50rpx;
-        background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
-        box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
 
-        .reading {
-            width: 24rpx;
-            height: 32rpx;
+        .audioPlayBg {
+          width: 150rpx;
+          height: 150rpx;
+        }
+
+        .audioPlayZhen {
+          position: absolute;
+          right: 30rpx;
+          top: 16rpx;
+          width: 32rpx;
+          height: 40rpx;
+        }
+
+        .cover {
+          position: absolute;
+          width: 130rpx;
+          height: 130rpx;
+          border-radius: 50%;
         }
 
-        .reading-text {
-            color: white;
-            font-size: 30rpx;
-            margin-left: 12rpx;
+        .circle {
+          animation: identifier 12s infinite linear;
         }
+      }
+
+      .titleBox {
+        position: relative;
+        width: 256rpx;
+        font-size: 30rpx;
+        line-height: 54rpx;
+        color: white;
+        text-align: center;
+      }
+    }
+  }
+
+  .workFooter {
+    margin-top: 15rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 14rpx 20rpx 0rpx;
+
+    .mangeL-box {
+      display: flex;
+      align-items: center;
+      margin-right: 30rpx;
+
+      .icon {
+        width: 44rpx;
+        height: 44rpx;
+      }
+
+      .icon-name {
+        margin-left: 8rpx;
+        font-size: 28rpx;
+      }
+    }
+  }
+
+  .toReading {
+    width: 166rpx;
+    margin: 30rpx auto 0rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12rpx 32rpx;
+    border-radius: 50rpx;
+    background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+    box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
+
+    .reading {
+      width: 24rpx;
+      height: 32rpx;
+    }
+
+    .reading-text {
+      color: white;
+      font-size: 30rpx;
+      margin-left: 12rpx;
     }
+  }
 }

components/videoPreview/index.wxss

@@ -186,7 +186,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 14rpx 20rpx 30rpx;
+  padding: 14rpx 20rpx 0rpx;
 }
 .work .workFooter .mangeL-box {
   display: flex;
@@ -203,7 +203,7 @@
 }
 .work .toReading {
   width: 166rpx;
-  margin: 0 auto;
+  margin: 30rpx auto 0rpx;
   display: flex;
   align-items: center;
   justify-content: center;

pages/reading/index.js

@@ -26,6 +26,7 @@ let stl = null
 let setTimeoutObj = null
 // 录音
 let innerAudioContext = null
+// 试听
 let resultAudioContext = null
 /*创建基础引擎*/
 let wsEngine = aiengine.createWsEngine({});
@@ -36,6 +37,8 @@ Page({
     videoInfo: {},
     currentRow: null,
     state: false,
+    // 是否静音播放视频
+    muted: false,
     countDown: {
       state: false,
       num: 3,
@@ -71,7 +74,6 @@ Page({
         setReadDetail: 'setReadDetail'
       }
     })
-
     // 录音授权
     wx.getSetting({
       success(res) {
@@ -106,7 +108,6 @@ Page({
       item.readTime = data[index + 1] ? data[index + 1].time - item.time : ''
       return item
     })
-
     this.setData({
       article: data,
       videoInfo
@@ -118,7 +119,7 @@ Page({
       this.videoContext = wx.createVideoContext('myVideo')
     } else {
       this.innerAudioContext = wx.createInnerAudioContext();
-      this.innerAudioContext.src = videoInfo.userRead.audioPath
+      this.innerAudioContext.src = videoInfo.userRead.originVideo
       this.innerAudioContext.onEnded(res => {
         this.finishRecord()
       })
@@ -141,7 +142,9 @@ Page({
       return
     }
     if (this.data.readingReset) {
-      this.stopMediaState()
+      if (!this.data.videoInfo.userReadExtend || this.data.videoInfo.userReadExtend.resourcesType == 0) {
+        this.stopMediaState()
+      }
       this.clearReset()
       this.getHeight()
     }
@@ -253,6 +256,7 @@ Page({
   },
   // 结束录制
   finishRecord() {
+    console.log('触发结束录制了');
     recorderManager.stop();
     this.stopMediaState()
     clearTimeout(this.setTimeoutObj)
@@ -281,6 +285,8 @@ Page({
       title: this.data.videoInfo.userRead.title,
       id: this.data.videoInfo.userRead.exampleId,
       coverImg: this.data.videoInfo.userRead.coverImg,
+      resourcesType: this.data.videoInfo.userReadExtend.resourcesType,
+      aBg: this.data.videoInfo.userReadExtend.resourcesType == 1 ? this.data.videoInfo.userReadExtend.backgroundVirtualImg : '',
       originVideo: this.data.videoInfo.userRead.originVideo
     }
     this.setReadDetail(detail)
@@ -379,9 +385,13 @@ Page({
   },
   videoPlay() {
     if (this.data.readingReset) {
+      console.log(this.resultAudioContext, 'videoPlay');
       if (this.resultAudioContext) {
         this.resultAudioContext.stop()
       }
+      this.setData({
+        muted: true
+      })
       this.resultAudioContext = wx.createInnerAudioContext();
       this.resultAudioContext.src = this.data.readDetail.tempFilePath; // 这里可以是录音的临时路径
       this.resultAudioContext.play();
@@ -389,6 +399,7 @@ Page({
   },
   // 清除试听状态
   clearReset() {
+    console.log('执行了', this.resultAudioContext);
     if (this.resultAudioContext) {
       this.resultAudioContext.stop()
     }
@@ -398,6 +409,9 @@ Page({
   },
   // 控制视频或音频的播放状态
   async playMediaState() {
+    this.setData({
+      muted: false
+    })
     if (!this.data.videoInfo.userReadExtend || this.data.videoInfo.userReadExtend.resourcesType == 0) {
       this.videoContext.play()
     } else {
@@ -442,8 +456,8 @@ Page({
     clearInterval(this.stl)
   },
   creatShare() {
-    let video = this.data.readDetail
     return new Promise((resolve, reject) => {
+      let video = this.data.videoInfo
       let context = wx.createSelectorQuery();
       context
         .select('#share')
@@ -459,53 +473,80 @@ Page({
           ctx.scale(dpr, dpr);
           ctx.font = '14px PingFang';
           let pic = canvas.createImage();
-          pic.src = video.coverImg; //可以是本地，也可以是网络图片
+          pic.src = video.userReadExtend && video.userReadExtend.resourcesType == 1 ? video.userReadExtend.backgroundVirtualImg : 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 fx = canvas.createImage();
-              fx.src = '/static/share.png'
-              fx.onload = () => {
-                ctx.drawImage(fx, 12, 220, 20, 20)
-                ctx.fillText('分享', 36, 238)
-                // 收藏，一个一个渲染
-                let sc = canvas.createImage();
-                sc.src = '/static/no_collect.png'
-                sc.onload = () => {
-                  ctx.drawImage(sc, 110, 220, 19, 19)
-                  ctx.fillText('收藏', 134, 238)
-                  //点赞
-                  let dz = canvas.createImage();
-                  dz.src = '/static/heart.png'
-                  dz.onload = () => {
-                    ctx.drawImage(dz, 318, 222, 22, 22)
-                    ctx.fillText(0, 254, 238)
-                    // 评论
-                    let pl = canvas.createImage();
-                    pl.src = '/static/comment.png'
-                    pl.onload = () => {
-                      ctx.drawImage(pl, 228, 222, 22, 22)
-                      ctx.fillText(0, 340, 238)
-                      setTimeout(() => {
-                        wx.canvasToTempFilePath({
-                          canvas: canvas,
-                          success(res) {
-                            resolve({
-                              title: '请欣赏我的课文朗读作品，点赞+评论。',
-                              path: `/pages/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
-                              imageUrl: res.tempFilePath
-                            })
-                          },
-                          fail(res) {
-                            reject()
-                          }
-                        }, this)
-                      }, 500)
-                    }
+            if (video.userReadExtend.resourcesType == 1) {
+              let aBg = canvas.createImage();
+              aBg.src = '/static/shareAudioBg.png';
+              aBg.onload = () => {
+                ctx.drawImage(aBg, 127.5, 38, 120, 120);
+                let rate = 0.5
+                ctx.arc(
+                  Math.floor(375 * rate),
+                  98,
+                  Math.floor(100 * rate),
+                  0,
+                  2 * Math.PI
+                );
+                ctx.clip() //裁剪
+                let coverImg = canvas.createImage();
+                coverImg.src = video.userRead.coverImg;
+                coverImg.onload = () => {
+                  ctx.drawImage( //定位在圆圈范围内便会出现
+                    coverImg, //图片暂存路径
+                    129, 42,
+                    110, 110,
+                  );
+                  ctx.restore()
+                }
+              }
+            }
+          }
+          let peiyin = canvas.createImage();
+          peiyin.src = '/static/peiyin.jpg';
+          peiyin.onload = () => {
+            ctx.drawImage(peiyin, 0, 211, 375, 89);
+            //分享
+            let fx = canvas.createImage();
+            fx.src = '/static/share.png'
+            fx.onload = () => {
+              ctx.drawImage(fx, 12, 220, 20, 20)
+              ctx.fillText('分享', 36, 238)
+              // 收藏，一个一个渲染
+              let sc = canvas.createImage();
+              sc.src = '/static/no_collect.png'
+              sc.onload = () => {
+                ctx.drawImage(sc, 110, 220, 19, 19)
+                ctx.fillText('收藏', 134, 238)
+                //点赞
+                let dz = canvas.createImage();
+                dz.src = '/static/heart.png'
+                dz.onload = () => {
+                  ctx.drawImage(dz, 318, 222, 22, 22)
+                  ctx.fillText(0, 254, 238)
+                  // 评论
+                  let pl = canvas.createImage();
+                  pl.src = '/static/comment.png'
+                  pl.onload = () => {
+                    ctx.drawImage(pl, 228, 222, 22, 22)
+                    ctx.fillText(0, 340, 238)
+                    setTimeout(() => {
+                      wx.canvasToTempFilePath({
+                        canvas: canvas,
+                        success(res) {
+                          console.log(wx.getStorageSync('shareVideoId'));
+                          resolve({
+                            title: '我的新作品发布啦，快来捧场点赞！',
+                            path: `/pages/pkPage/index?videoId=${wx.getStorageSync('shareVideoId')}&uid=${wx.getStorageSync('uid')}`,
+                            imageUrl: res.tempFilePath
+                          })
+                        },
+                        fail(res) {
+                          reject()
+                        }
+                      }, this)
+                    }, 500)
                   }
                 }
               }

pages/reading/index.wxml

@@ -1,8 +1,8 @@
 <view class="readingBox">
   <block wx:if="{{!videoInfo.userReadExtend||videoInfo.userReadExtend.resourcesType==0}}">
     <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>
+    <video id="myVideo" src="{{videoInfo.userRead.originVideo}}" bindended='videoEnd'
+      show-center-play-btn="{{readingReset}}" bindplay='videoPlay' muted="{{muted}}"></video>
   </block>
   <view class="audio" wx:else>
     <image src="{{videoInfo.userRead.coverImg}}" class="audioBg" mode="" />
@@ -82,7 +82,9 @@
       </view>
     </view>
   </view>
+
   <view class="controller">
+
     <image wx:if="{{state}}" src="/static/readingNow.gif" class="readingNow" bindtap="setCountDown" />
     <image wx:else src="/static/work.png" class="playImg" bindtap="setCountDown" />
     <view class="text">

pages/score/index.js

@@ -48,6 +48,7 @@ Page({
   },
   creatShare() {
     let video = this.data.readDetail
+    console.log(video);
     return new Promise((resolve, reject) => {
       let context = wx.createSelectorQuery();
       context
@@ -64,53 +65,79 @@ Page({
           ctx.scale(dpr, dpr);
           ctx.font = '14px PingFang';
           let pic = canvas.createImage();
-          pic.src = video.coverImg; //可以是本地，也可以是网络图片
+          pic.src = video.resourcesType == 1 ? video.aBg : video.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 fx = canvas.createImage();
-              fx.src = '/static/share.png'
-              fx.onload = () => {
-                ctx.drawImage(fx, 12, 220, 20, 20)
-                ctx.fillText('分享', 36, 238)
-                // 收藏，一个一个渲染
-                let sc = canvas.createImage();
-                sc.src = '/static/no_collect.png'
-                sc.onload = () => {
-                  ctx.drawImage(sc, 110, 220, 19, 19)
-                  ctx.fillText('收藏', 134, 238)
-                  //点赞
-                  let dz = canvas.createImage();
-                  dz.src = '/static/heart.png'
-                  dz.onload = () => {
-                    ctx.drawImage(dz, 318, 222, 22, 22)
-                    ctx.fillText(0, 254, 238)
-                    // 评论
-                    let pl = canvas.createImage();
-                    pl.src = '/static/comment.png'
-                    pl.onload = () => {
-                      ctx.drawImage(pl, 228, 222, 22, 22)
-                      ctx.fillText(0, 340, 238)
-                      setTimeout(() => {
-                        wx.canvasToTempFilePath({
-                          canvas: canvas,
-                          success(res) {
-                            resolve({
-                              title: '请欣赏我的课文朗读作品，点赞+评论。',
-                              path: `/pages/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
-                              imageUrl: res.tempFilePath
-                            })
-                          },
-                          fail(res) {
-                            reject()
-                          }
-                        }, this)
-                      }, 500)
-                    }
+            if (video.resourcesType == 1) {
+              let aBg = canvas.createImage();
+              aBg.src = '/static/shareAudioBg.png';
+              aBg.onload = () => {
+                ctx.drawImage(aBg, 127.5, 38, 120, 120);
+                let rate = 0.5
+                ctx.arc(
+                  Math.floor(375 * rate),
+                  98,
+                  Math.floor(100 * rate),
+                  0,
+                  2 * Math.PI
+                );
+                ctx.clip() //裁剪
+                let coverImg = canvas.createImage();
+                coverImg.src = video.coverImg;
+                coverImg.onload = () => {
+                  ctx.drawImage( //定位在圆圈范围内便会出现
+                    coverImg, //图片暂存路径
+                    129, 42,
+                    110, 110,
+                  );
+                  ctx.restore()
+                }
+              }
+            }
+          }
+          let peiyin = canvas.createImage();
+          peiyin.src = '/static/peiyin.jpg';
+          peiyin.onload = () => {
+            ctx.drawImage(peiyin, 0, 211, 375, 89);
+            //分享
+            let fx = canvas.createImage();
+            fx.src = '/static/share.png'
+            fx.onload = () => {
+              ctx.drawImage(fx, 12, 220, 20, 20)
+              ctx.fillText('分享', 36, 238)
+              // 收藏，一个一个渲染
+              let sc = canvas.createImage();
+              sc.src = '/static/no_collect.png'
+              sc.onload = () => {
+                ctx.drawImage(sc, 110, 220, 19, 19)
+                ctx.fillText('收藏', 134, 238)
+                //点赞
+                let dz = canvas.createImage();
+                dz.src = '/static/heart.png'
+                dz.onload = () => {
+                  ctx.drawImage(dz, 318, 222, 22, 22)
+                  ctx.fillText(0, 254, 238)
+                  // 评论
+                  let pl = canvas.createImage();
+                  pl.src = '/static/comment.png'
+                  pl.onload = () => {
+                    ctx.drawImage(pl, 228, 222, 22, 22)
+                    ctx.fillText(0, 340, 238)
+                    setTimeout(() => {
+                      wx.canvasToTempFilePath({
+                        canvas: canvas,
+                        success(res) {
+                          resolve({
+                            title: '我的新作品发布啦，快来捧场点赞！',
+                            path: `/pages/pkPage/index?videoId=${wx.getStorageSync('shareVideoId')}&uid=${wx.getStorageSync('uid')}`,
+                            imageUrl: res.tempFilePath
+                          })
+                        },
+                        fail(res) {
+                          reject()
+                        }
+                      }, this)
+                    }, 500)
                   }
                 }
               }