reader/pages/reading/index.js

import {
  getreadInfo,
  submitPlayLog
} from '~/api/video'
import {
  publishWorks,
  uploadPk,
  postWorksScore
} from '~/api/works'
import {
  userEvent
} from '~/api/global'
import {
  createStoreBindings
} from 'mobx-miniprogram-bindings'
import {
  store
} from '~/store/index'
import {
  setDuration
} from '~/utils/util'
const aiengine = require('~/utils/ChivoxAiEngine')
const sha1 = require('~/utils/sha1');
// 文章行高
let rowH = 0
let videoContext = null
// 滚动变色定时器
let stl = null
// 倒计时
let setTimeoutObj = null
// 录音
let innerAudioContext = null
// 试听
let resultAudioContext = null
/*创建基础引擎*/
let wsEngine = aiengine.createWsEngine({});
/*微信录音*/
let recorderManager = wx.getRecorderManager();
Page({
  data: {
    videoInfo: {},
    videoPath: '',
    currentRow: null,
    state: false,
    // 示例播放状态
    exampleState: false,
    // 是否静音播放视频
    muted: false,
    countDown: {
      state: false,
      num: 3,
    },
    contentH: 0,
    scrollTop: 0,
    //如果readingReset为true就是重读
    readingReset: false,
    //readingType为public是普通阅读,为pk是pk逻辑，readMatch为朗读赛
    readingType: 'public',
    percent: 0,
    uploadState: false,
    article: [],
    silderData: {
      currentTime: '00:00',
      endTime: '00:00',
      silderValue: 0
    },
    // 朗读赛的id
    activityId: '',
  },
  onLoad(options) {
    console.log(options);
    let videoId = options.videoId
    wx.setNavigationBarTitle({
      title: options.navBarTitle
    })
    this.getreadInfo(videoId, options.reset).then(res => {
      wx.nextTick(() => {
        if (options.voluntarily) {
          this.setCountDown()
        }
        if (options.autoPlay) {
          this.videoPlay()
        }
      })
    })
    this.setData({
      readingReset: options.reset || false,
      readingType: options.readingType || 'public',
      uploadHide: options.uploadHide,
      activityId: options.activityId || ''
    })
    // 手工绑定 
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: {
        userInfo: 'userInfo',
        readDetail: 'readDetail',
        pkData: 'pkData'
      },
      actions: {
        setReadDetail: 'setReadDetail'
      }
    })
    // 录音授权
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.record']) {
          wx.authorize({
            scope: 'scope.record',
            success() {
              // 用户已经同意小程序使用录音功能，后续调用接口不会弹窗询问
            },
            fail() {
              wx.showModal({
                title: '授权提示',
                content: '请先开启录音功能',
                success(res) {
                  wx.openSetting({
                    success(res) {}
                  })
                }
              })
            }
          })
        }
      }
    })
    /*监听评测结果：必须在基础引擎创建后，调用任何评测接口前设置监听，否则有可能收不到相关事件。*/
    wsEngine.onResult((res) => {
      this.getRecordScore(res)
    });
    wsEngine.onErrorResult(async (res) => {
      console.log("===收到错误结果=============", res)
      await userEvent({
        action: 'WXSCORE',
        targetContent: res
      })
    });
    this.innerAudioContext = wx.createInnerAudioContext();
    this.innerAudioContext.onTimeUpdate(res => {
      this.setData({
        ["silderData.sliderValue"]: Math.round(this.innerAudioContext.currentTime / this.innerAudioContext.duration * 100),
        ["silderData.currentTime"]: setDuration(this.innerAudioContext.currentTime)
      })
    })
    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.onError(res => {
      console.log(res, 'resultAudioContext');
    })
    this.innerAudioContext.onError(res => {
      console.log(res, 'bbbb');
    })
    this.resultAudioContext.onEnded(res => {
      console.log('102-resultAudioContext.ended');
      this.setData({
        exampleState: false
      })
      if (this.data.videoInfo.userReadExtend.resourcesType == 0) {
        this.videoContext.stop()
        this.videoContext.seek(0)
      }
    })
    this.resultAudioContext.onStop((res) => {
      console.log('109-resultAudioContext.onStop');
      this.setData({
        exampleState: false
      })
      if (this.data.videoInfo.userReadExtend.resourcesType == 0) {
        this.videoContext.stop()
        this.videoContext.seek(0)
      }
    });
    this.resultAudioContext.onEnded(res => {
      this.setData({
        ["silderData.sliderValue"]: 100
      })
    })
  },
  // 获取阅读内容
  getreadInfo(videoId, reset = false) {
    return new Promise(async (resolve, reject) => {
      let videoInfo = await getreadInfo(videoId)
      let data = JSON.parse(videoInfo.userReadExtend.lessonText)
      data = data.map((item, index) => {
        item.time = Number(item.time)
        item.readTime = data[index + 1] ? data[index + 1].time - item.time : ''
        return item
      })
      this.setData({
        videoPath: videoInfo.userRead.originVideo,
        article: data,
        videoInfo,
        ["silderData.endTime"]: setDuration(videoInfo.userRead.duration)
      })
      if (!reset) {
        this.getHeight()
      }
      if (this.data.videoInfo.userReadExtend.resourcesType == 0) {
        this.videoContext = wx.createVideoContext('myVideo')
      } else {
        this.innerAudioContext.src = videoInfo.userRead.originVideo
        this.innerAudioContext.onEnded(res => {
          console.log("138innerAudioContext触发的");
          this.resetReading()
        })
        this.innerAudioContext.onStop((res) => {
          console.log("143innerAudioContext触发的");
        });
      }
      resolve()
    })
  },
  // 开始录制
  setCountDown() {
    /* let child = this.selectComponent('#readingTips').data
    // 判断是否有权限朗读 不是vip并且没有朗读机会
    const isVip = child.vipTime ? true : false
    if (!isVip && child.userInfo.experienceAmount <= 0) {
      return this.selectComponent('#readingTips').showModal();
    } */
    if (this.data.state) {
      this.resetReading()
      return
    }
    if (!this.data.readingReset) {
      this.getHeight()
    }
    this.resetReading()
    this.setData({
      readingReset: false,
      'countDown.state': true
    })
    this.stl = setInterval(async () => {
      if (this.data.countDown.num == 0) {
        clearInterval(this.stl)
        this.setData({
          state: true,
          countDown: {
            state: false,
            num: 3
          }
        })
        await this.playMediaState()
        await this.soundRecording()
        this.startRecording()
      } else {
        this.setData({
          'countDown.num': --this.data.countDown.num
        })
      }
    }, 1000)
  },
  // 录音
  soundRecording() {
    /*调用微信开始录音接口，并启动语音评测*/
    let timeStamp = new Date().getTime()
    let sig = sha1(`16075689600000da${timeStamp}caa8e60da6042731c230fe431ac9c7fd`)
    let app = {
      applicationId: '16075689600000da',
      sig, //签名字符串 
      alg: 'sha1',
      timestamp: timeStamp + '',
      userId: wx.getStorageSync('uid')
    }
    let lessonText = JSON.parse(this.data.videoInfo.userReadExtend.lessonText).map((item) => {
      return item.text
    }).join('')
    // https://www.chivox.com/opendoc/#/ChineseDoc/coreCn/Chinese/cn.sent.raw?id=%e5%8f%82%e6%95%b0%e8%af%b4%e6%98%8e <----参数说明
    wsEngine.start({
      request: {
        coreType: "cn.pred.raw",
        refText: lessonText,
        rank: 100,
        attachAudioUrl: 1,
        result: {
          details: {
            gop_adjust: -0.1
          }
        }
      },
      app,
      audio: {
        audioType: "mp3",
        channel: 1,
        sampleBytes: 2,
        sampleRate: 16000
      },
      success: (res) => {
        /*引擎启动成功，可以启动录音机开始录音，并将音频片传给引擎*/
        const options = {
          duration: 600000,
          sampleRate: 44100, //采样率
          numberOfChannels: 1, //录音通道数
          encodeBitRate: 192000, //编码码率
          format: 'mp3', //音频格式，有效值aac/mp3
          frameSize: 50 //指定帧大小，单位 KB
        };
        //开始录音,在开始录音回调中feed音频片
        recorderManager.start(options);
      },
      fail: (res) => {
        console.log("fail=============  ", res);
      },
    });
    recorderManager.onError(res => {
      console.log(res, 'rrrrrsse');
    })
    //监听录音开始事件
    recorderManager.onStart(() => {});
    //监听录音结束事件
    recorderManager.onStop((res) => {
      console.log('录音结束', res);
      this.setData({
        tempFilePath: res.tempFilePath,
      });
      //录音机结束后，驰声引擎执行结束操作，等待评测返回结果
      wsEngine.stop({
        success: () => {
          console.log('====== wsEngine stop success ======');
        },
        fail: (res) => {
          console.log('录音结束报错', res);
        },
      });
    });
    //监听已录制完指定帧大小的文件事件。如果设置了 frameSize，则会回调此事件。
    recorderManager.onFrameRecorded((res) => {
      const {
        frameBuffer
      } = res
      //TODO 调用feed接口传递音频片给驰声评测引擎
      wsEngine.feed({
        data: frameBuffer, // frameBuffer为微信录音机回调的音频数据
        success: () => {},
        fail: (res) => {
          console.log('监听已录制完指定帧大小报错', res)
        },
      });
    });
  },
  // 直接跳转的时候用的，勿动
  // util() {
  //   wx.navigateTo({
  //     url: `/pages/score/index?readingType=${this.data.readingType}`,
  //     events: {
  //       // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
  //       someEvent: (data) => {
  //         console.log(data)
  //         this.setData({
  //           readingReset: data.reset || false,
  //           readingType: data.readingType || 'public',
  //           uploadHide: data.uploadHide
  //         })
  //         console.log(this.data, 'ggggggggg');
  //       }
  //     },
  //   })
  // },
  // 获取测评结果
  async getRecordScore(res) {
    const result = res.result;
    const integrity = Math.floor(result.integrity); //完成度
    const tone = Math.floor(result.tone); // 语调声调
    const accuracy = Math.floor(result.accuracy); // 准确度 发音分
    const fluency = Math.floor(result.fluency.overall); //流利度
    let myOverall = Math.floor(integrity * 0.45 + accuracy * 0.35 + fluency * 0.1 + tone * 0.1);
    let detail = {
      integrity,
      tone,
      accuracy,
      fluency,
      myOverall,
      tempFilePath: this.data.tempFilePath,
      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
    }
    console.log('评测结果', detail);
    this.setReadDetail(detail)
    await userEvent({
      action: 'WXSCORE',
    })
    if (this.data.readingType == 'public' || this.data.readingType == 'readMatch') {
      wx.navigateTo({
        url: `/pages/score/index?readingType=${this.data.readingType}&activityId=${this.data.activityId}`,
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          goback: (data) => {
            this.setData({
              readingReset: data.reset || false,
              readingType: data.readingType || 'public',
              uploadHide: data.uploadHide
            })
          }
        },
      })
    } else {
      this.uploadAudio()
    }
  },
  // 挑战录音上传
  uploadAudio() {
    this.setData({
      uploadState: true
    })
    const uploadTask = wx.uploadFile({
      url: 'https://reader-api.ai160.com//file/upload',
      filePath: this.data.tempFilePath,
      name: '朗读录音',
      header: {
        uid: wx.getStorageSync('uid')
      },
      success: async (res) => {
        const formateRes = JSON.parse(res.data);
        let audioPath = formateRes.data;
        let uploadRes = await publishWorks({
          exampleId: this.data.pkData.exampleId,
          audioPath,
        })
        let _data = this.data.readDetail
        let scoreRes = await postWorksScore({
          "userReadId": uploadRes.id,
          "complete": _data.integrity,
          "accuracy": _data.accuracy,
          "speed": _data.fluency,
          "intonation": _data.tone,
          "score": _data.myOverall
        }).finally(() => {
          this.setData({
            uploadState: false
          })
        })
        console.log({
          "userReadId": uploadRes.id,
          "complete": _data.integrity,
          "accuracy": _data.accuracy,
          "speed": _data.fluency,
          "intonation": _data.tone,
          "score": _data.myOverall
        }, 'score', scoreRes, 'scoreRes');
        let data = {
          challengerUserReadId: uploadRes.id,
          userReadId: this.data.pkData.id,
          winnerUId: this.data.pkData.score > _data.myOverall ? this.data.pkData.uid : this.data.pkData.score == _data.myOverall ? '' : wx.getStorageSync('uid')
        }
        let result = await uploadPk(data)
        await userEvent({
          action: 'WXPKUPLOAD',
        })
        wx.redirectTo({
          url: `/pages/pkResult/index?id=${result.id}`
        })
      },

    });
    uploadTask.onProgressUpdate((res) => {
      this.setData({
        percent: res.progress
      })
    })
  },
  // 字体换行
  startRecording() {
    setTimeout(() => {
      if (this.data.currentRow == null) {
        this.setData({
          currentRow: 0
        })
      }
      let row = this.data.article[this.data.currentRow]
      if (!row.readTime) {
        return
      }
      this.setTimeoutObj = setTimeout(() => {
          this.setData({
            currentRow: ++this.data.currentRow
          })
          this.setData({
            scrollTop: this.rowH * this.data.currentRow
          })
          this.startRecording()
        },
        row.readTime);
    }, 100)
  },
  // 视频播放结束
  videoEnd() {
    this.resetReading()
  },
  videoPlay() {
    if (this.data.state) {
      return
    }
    if (this.data.videoInfo.userReadExtend.resourcesType == 1) {
      if (this.data.exampleState) {
        this.setData({
          exampleState: false
        })
        return this.resultAudioContext.stop()
      }
      this.resultAudioContext.src = this.data.readingReset ? this.data.readDetail.tempFilePath : this.data.videoInfo.userRead.audioPath;
      setTimeout(() => {
        this.resultAudioContext.play();
      }, 200)
      this.setData({
        exampleState: true
      })
    } else {
      if (this.data.readingReset) {
        this.resultAudioContext.src = this.data.readDetail.tempFilePath;
        this.resultAudioContext.play();
        this.setData({
          muted: true,
          exampleState: true
        })
      } else {
        this.setData({
          muted: false,
          exampleState: true
        })
      }
      this.setData({
        videoPath: this.data.videoInfo.userRead.videoPath
      })
      wx.nextTick(() => {
        this.videoContext.play()
      })
    }
    this.startRecording()
    submitPlayLog({
      userReadId: this.data.videoInfo.userRead.exampleId,
      playStopTime: 1000
    })
  },
  // 控制视频或音频的播放状态
  async playMediaState() {
    this.setData({
      muted: false
    })
    if (this.data.videoInfo.userReadExtend.resourcesType == 0) {
      this.setData({
        videoPath: this.data.videoInfo.userRead.originVideo
      })
      wx.nextTick(() => {
        this.videoContext.play()
      })
    } else {
      this.innerAudioContext.play();
    }
    await userEvent({
      action: 'WXREADING',
      readId: this.data.videoInfo.userRead.id
    })
  },
  // 重置一切状态
  resetReading() {
    clearTimeout(this.setTimeoutObj)
    clearInterval(this.stl)
    // 重置视频
    if (this.data.videoInfo.userReadExtend.resourcesType == 0) {
      this.videoContext.stop()
      this.videoContext.seek(0)
    }
    // 重置试听音频
    if (this.data.exampleState) {
      this.resultAudioContext.stop()
      // 重置录音时的背景音乐
      this.innerAudioContext.stop();
      console.log('是我暂停了');
    }
    if (this.data.state) {
      // 重置录音时的背景音乐
      this.innerAudioContext.stop();
      /*微信录音结束*/
      recorderManager.stop();
    }
    this.setData({
      exampleState: false,
      state: false,
      currentRow: null,
      scrollTop: 0,
      ["silderData.sliderValue"]: 0,
      ["silderData.currentTime"]: '00:00'
    })
  },
  // 阻止作品上传时返回
  beforeleave() {
    if (this.data.uploadState) {
      this.setData({
        uploadState: false
      })
      wx.showModal({
        title: '上传作品中',
        content: '小朋友请耐心等待哦~',
        showCancel: false,
        success: (res) => {
          if (res.confirm) {
            this.setData({
              uploadState: true
            })
          }
        }
      })
    }
  },
  // 获取设备高度与行高度
  getHeight() {
    var query = wx.createSelectorQuery();
    query.select('.content').boundingClientRect((rect) => {
      this.setData({
        contentH: rect.height
      })
    }).exec()
    query.select('.row').boundingClientRect((rect) => {
      this.rowH = rect.height
    }).exec()
  },
  // 进度条
  slider({
    detail
  }) {
    this.resultAudioContext.pause();
    this.resultAudioContext.seek(detail.value / 100 * this.data.videoInfo.userRead.duration)
    setTimeout(() => {
      this.resultAudioContext.play()
    }, 300)
  },
  onHide() {
    wsEngine.reset()
    this.resetReading()
  },
  onUnload() {
    wsEngine.reset()
    this.resetReading()
    this.storeBindings.destroyStoreBindings()
  },
  backReading() {
    wx.navigateBack({
      delta: 1
    })
  },
  otherWork() {
    wx.navigateTo({
      url: `/pages/otherWork/index?exampleId=${this.data.videoInfo.userRead.exampleId}`
    })
  },
  creatShare() {
    return new Promise((resolve, reject) => {
      let video = this.data.videoInfo
      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.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)
                      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()
                          }
                        }
                      }
                      setTimeout(() => {
                        console.log(wx.getStorageSync('shareVideoId'), 'reading-wx.getStorageSync');
                        wx.canvasToTempFilePath({
                          canvas: canvas,
                          success(res) {
                            resolve({
                              title: '我的新作品发布啦，快来捧场点赞！',
                              path: `/pages/pkPage/index?videoId=${wx.getStorageSync('shareVideoId')}&uid=${wx.getStorageSync('uid')}&isShare=true`,
                              imageUrl: res.tempFilePath
                            })
                          },
                          fail(res) {
                            reject()
                          }
                        }, this)
                      }, 500)
                    }
                  }
                }
              }
            }
          }
        })
    })
  },
  onShareAppMessage({
    from,
    target
  }) {
    if (from == 'button') {
      const promise = new Promise(resolve => {
        this.creatShare().then(res => {
          resolve(res)
        })
      })
      return {
        title: '我的新作品发布啦，快来捧场点赞！',
        path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
        imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/375-300-1.jpg',
        promise
      }
    } else {
      return {
        title: '自从用了它，家里朗朗书声，美妙极了！你家孩子也快来试试！',
        path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
        imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/375-300-1.jpg'
      }
    }
  },
})