reader/pages/reading/index.js

import {
    getreadInfo,
    submitPlayLog
} from '~/api/video'
import {
    publishWorks,
    uploadPk,
    postWorksScore
} from '~/api/works'
import {
    buyVip,
    getVipInfo
} from '~/api/user'
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: '',
        isVip: false
    },
    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.data.isVip) {
                    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
            })
        })
    },
    onShow() {
        this.getVipInfo()
    },
    // 获取是否vip
    async getVipInfo() {
        let isVip = await getVipInfo()
        console.log(isVip, '111');
        this.setData({
            isVip
        })
    },
    // 获取阅读内容
    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() {
        if (!this.data.isVip) {
            this.resetReading()
            return this.selectComponent('#buyVip').open({
                vipTime: this.data.isVip
            })
        }
        /* 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')
                }
                console.log('data----', this.data.pkData.score, _data.myOverall, data);
                let result = await uploadPk(data)
                await userEvent({
                    action: 'WXPKUPLOAD',
                })
                wx.redirectTo({
                    url: `/pages/pkResult/index?id=${result.id}`
                })
            },
            fail: (res) => {
                this.setData({
                    uploadState: false
                })
            }
        });
        uploadTask.onProgressUpdate((res) => {
            console.log('作品上传进度', res.progress);
            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() {
        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}`
        })
    },
    async toBuy({
        currentTarget
    }) {
        wx.showLoading({
            title: '提交中',
            mask: true
        })
        let res = await buyVip({
            productId: currentTarget.dataset.id
        }).finally(() => {
            wx.hideLoading()
        })
        let {
            timeStamp,
            nonceStr,
            signType,
            paySign
        } = res
        // package保留字
        wx.requestPayment({
            timeStamp,
            nonceStr,
            package: res.package,
            signType,
            paySign,
            success: (res) => {
                this.selectComponent('#vipModal').open({
                    type: 'svip'
                })
                setTimeout(() => {
                    this.setUserInfo()
                }, 1500)
            },
            fail(res) {
                wx.showToast({
                    title: "支付失败",
                    icon: "none",
                    duration: 3000
                })
            }
        })
    },
    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'
            }
        }
    },
})