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 => {
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) {
console.log(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((res) => {
console.log("===收到错误结果=============", 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(() => {
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() {
/*调用微信开始录音接口，并启动语音评测*/
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')
// 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)
},
});
});
},
// eeeeee() {
// 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');
// }
// },
// })
// },
// 获取测评结果
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)
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
})
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}`
})
},
complete: () => {
this.setData({
uploadState: false
})
}
});
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()
})
}
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'
})
},
// 获取设备高度与行高度
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() {
console.log('结束了吗');
this.resetReading()
},
onUnload() {
this.resetReading()
this.storeBindings.destroyStoreBindings()
},
backReading() {
wx.navigateBack({
delta: 1
})
},
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'
}
}
},
})