import {
getreadInfo
} 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'
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: {},
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: []
},
onLoad(options) {
let videoId = options.videoId
this.getreadInfo(videoId, options.reset)
this.setData({
readingReset: options.reset || false,
readingType: options.readingType || 'public',
uploadHide: options.uploadHide
})
// 手工绑定
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() {
// 用户已经同意小程序使用录音功能，后续调用接口不会弹窗询问
wx.getRecorderManager()
}
})
}
}
})
/*监听评测结果：必须在基础引擎创建后，调用任何评测接口前设置监听，否则有可能收不到相关事件。*/
wsEngine.onResult((res) => {
this.getRecordScore(res)
});
wsEngine.onErrorResult((res) => {
console.log("===收到错误结果=============", res)
});
this.innerAudioContext = wx.createInnerAudioContext();
this.resultAudioContext = wx.createInnerAudioContext();
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)
}
});
},
// 获取阅读内容
async getreadInfo(videoId, reset = false) {
let videoInfo = await getreadInfo(videoId)
wx.setNavigationBarTitle({
title: videoInfo.userRead.title
})
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({
article: data,
videoInfo
})
if (!reset) {
this.getHeight()
}
if (this.data.videoInfo.userReadExtend.resourcesType == 0) {
this.videoContext = wx.createVideoContext('myVideo')
} else {
console.log('走了136');
this.innerAudioContext.src = videoInfo.userRead.originVideo
this.innerAudioContext.onEnded(res => {
console.log("138innerAudioContext触发的");
this.resetReading()
})
this.innerAudioContext.onStop((res) => {
console.log("143innerAudioContext触发的");
// this.resetReading()
});
}
},
// 开始录制
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(() => {
if (this.data.countDown.num == 0) {
clearInterval(this.stl)
this.setData({
state: true,
countDown: {
state: false,
num: 3
}
})
this.playMediaState()
this.soundRecording()
this.startRecording()
} else {
this.setData({
'countDown.num': --this.data.countDown.num
})
}
}, 1000)
},
// 录音
soundRecording() {
console.log('zzz');
/*调用微信开始录音接口，并启动语音评测*/
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('\n')
wsEngine.start({
request: {
coreType: "cn.pred.raw",
refText: lessonText,
rank: 100,
attachAudioUrl: 1,
result: {
details: {
gop_adjust: 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)
},
});
});
},
// 获取测评结果
getRecordScore(res) {
const result = res.result;
const integrity = Math.floor(result.integrity); //完成度
const tone = Math.floor(result.tone); // 语调声调
const accuracy = Math.floor(result.overall); // 准确度 发音分
const fluency = Math.floor(result.fluency.overall); //流利度
let myOverall = Math.floor(integrity * 0.3 + accuracy * 0.5 + 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
}
this.setReadDetail(detail)
if (this.data.readingType == 'public' || this.data.readingType == 'readMatch') {
wx.redirectTo({
url: `/pages/score/index?readingType=${this.data.readingType}`
})
} else {
this.uploadAudio(detail)
}
},
// 挑战录音上传
uploadAudio(detail) {
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
postWorksScore({
"userReadId": uploadRes.id,
"complete": _data.integrity,
"accuracy": _data.accuracy,
"speed": _data.fluency,
"intonation": _data.tone,
"score": _data.myOverall
})
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)
wx.redirectTo({
url: `/pages/pkResult/index?id=${result.id}`
})
},
complete: () => {
this.setData({
uploadState: false
})
}
});
uploadTask.onProgressUpdate((res) => {
this.setData({
percent: res.progress
})
})
},
// 字体换行
startRecording() {
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);
},
// 视频播放结束
videoEnd() {
console.log('视频播放结束触发的');
this.resetReading()
},
videoPlay() {
console.log("触发");
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;
this.resultAudioContext.play();
this.setData({
exampleState: true
})
} else {
if (this.data.readingReset) {
console.log('是我播放了');
this.resultAudioContext.src = this.data.readDetail.tempFilePath;
this.resultAudioContext.play();
this.setData({
muted: true,
exampleState: true
})
} else {
this.setData({
muted: false,
exampleState: true
})
}
this.videoContext.play()
}
},
// 控制视频或音频的播放状态
async playMediaState() {
console.log('触发');
this.setData({
muted: false
})
if (this.data.videoInfo.userReadExtend.resourcesType == 0) {
this.videoContext.play()
} else {
this.innerAudioContext.play();
}
await userEvent({
action: 'READING',
readId: this.data.videoInfo.userRead.id
})
},
// 重置一切状态
resetReading() {
clearTimeout(this.setTimeoutObj)
clearInterval(this.stl)
console.log(this.data.exampleState, this.data.state, 'vvvvvvvvvvvvvvvvvvvvvvv');
// 重置视频
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
})
},
// 获取设备高度与行高度
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()
},
onHide() {
this.resetReading()
},
onUnload() {
this.resetReading()
},
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);
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) {
resolve({
title: '我的新作品发布啦，快来捧场点赞！',
path: `/pages/pkPage/index?videoId=${wx.getStorageSync('shareVideoId')}&uid=${wx.getStorageSync('uid')}`,
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/shareContent.png',
promise
}
} else {
return {
title: '课文朗读，从未如此有趣。',
path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
}
}
},
})