index.js 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. import {
  2. getreadInfo
  3. } from '~/api/video'
  4. import {
  5. createStoreBindings
  6. } from 'mobx-miniprogram-bindings'
  7. import {
  8. store
  9. } from '~/store/index'
  10. const aiengine = require('~/utils/ChivoxAiEngine')
  11. const sha1 = require('~/utils/sha1');
  12. // 文章行高
  13. let rowH = 0
  14. let videoContext = null
  15. // 滚动变色定时器
  16. let stl = null
  17. // 倒计时
  18. let setTimeoutObj = null
  19. // 录音
  20. let innerAudioContext = null
  21. /*创建基础引擎*/
  22. let wsEngine = aiengine.createWsEngine({});
  23. /*微信录音*/
  24. let recorderManager = wx.getRecorderManager();
  25. Page({
  26. data: {
  27. videoInfo: {},
  28. currentRow: null,
  29. state: false,
  30. countDown: {
  31. state: false,
  32. num: 3,
  33. },
  34. contentH: 0,
  35. scrollTop: 0,
  36. //如果readingReset为true就是重读
  37. readingReset: false,
  38. article: [{
  39. id: 1,
  40. text: '传说在很久很久以前,',
  41. time: '0'
  42. }, {
  43. id: 2,
  44. text: '天和地还没有分开,',
  45. time: '4010'
  46. }, {
  47. id: 3,
  48. text: '整个宇宙混沌一团,',
  49. time: '7080'
  50. }, {
  51. id: 4,
  52. text: '像个大鸡蛋。',
  53. time: '10150'
  54. }, {
  55. id: 5,
  56. text: '有个叫盘古的大神,',
  57. time: '13150'
  58. }, {
  59. id: 6,
  60. text: '昏睡了一万八千年。',
  61. time: '16190'
  62. }, {
  63. id: 7,
  64. text: '一天,大神醒来,睁眼一看,',
  65. time: '20030'
  66. }, {
  67. id: 8,
  68. text: '周围黑乎乎一片,',
  69. time: '24210'
  70. }, {
  71. id: 9,
  72. text: '什么也看不见。',
  73. time: '27300'
  74. }]
  75. },
  76. onLoad(options) {
  77. let videoId = options.videoId
  78. this.getreadInfo(videoId)
  79. let data = this.data.article
  80. data = data.map((item, index) => {
  81. item.readTime = data[index + 1] ? data[index + 1].time - item.time : ''
  82. return item
  83. })
  84. this.setData({
  85. article: data,
  86. readingReset: options.reset || false
  87. })
  88. // 手工绑定
  89. this.storeBindings = createStoreBindings(this, {
  90. store,
  91. fields: {
  92. readDetail: 'readDetail'
  93. },
  94. actions: {
  95. setReadDetail: 'setReadDetail'
  96. }
  97. })
  98. if (!options.reset) {
  99. this.getHeight()
  100. }
  101. this.videoContext = wx.createVideoContext('myVideo')
  102. // 录音授权
  103. wx.getSetting({
  104. success(res) {
  105. if (!res.authSetting['scope.record']) {
  106. wx.authorize({
  107. scope: 'scope.record',
  108. success() {
  109. // 用户已经同意小程序使用录音功能,后续调用接口不会弹窗询问
  110. wx.getRecorderManager()
  111. }
  112. })
  113. }
  114. }
  115. })
  116. /*监听评测结果:必须在基础引擎创建后,调用任何评测接口前设置监听,否则有可能收不到相关事件。*/
  117. wsEngine.onResult((res) => {
  118. this.getRecordScore(res)
  119. });
  120. wsEngine.onErrorResult((res) => {
  121. console.log("===收到错误结果=============", res)
  122. });
  123. },
  124. async getreadInfo(videoId) {
  125. let videoInfo = await getreadInfo(videoId)
  126. wx.setNavigationBarTitle({
  127. title: videoInfo.userRead.title
  128. })
  129. this.setData({
  130. videoInfo
  131. })
  132. },
  133. // 开始录制
  134. setCountDown() {
  135. if (this.data.state) {
  136. this.finishRecord()
  137. return
  138. }
  139. if (this.data.readingReset) {
  140. this.clearReset()
  141. this.getHeight()
  142. }
  143. this.setData({
  144. 'countDown.state': true
  145. })
  146. this.stl = setInterval(() => {
  147. if (this.data.countDown.num == 0) {
  148. clearInterval(this.stl)
  149. this.setData({
  150. state: true,
  151. countDown: {
  152. state: false,
  153. num: 3
  154. }
  155. })
  156. this.soundRecording()
  157. this.videoContext.play()
  158. this.startRecording()
  159. } else {
  160. this.setData({
  161. 'countDown.num': --this.data.countDown.num
  162. })
  163. }
  164. }, 1000)
  165. },
  166. // 录音
  167. soundRecording() {
  168. /*调用微信开始录音接口,并启动语音评测*/
  169. let timeStamp = new Date().getTime()
  170. let sig = sha1(`16075689600000da${timeStamp}caa8e60da6042731c230fe431ac9c7fd`)
  171. let app = {
  172. applicationId: '16075689600000da',
  173. sig, //签名字符串
  174. alg: 'sha1',
  175. timestamp: timeStamp + '',
  176. userId: wx.getStorageSync('uid')
  177. }
  178. let lessonText = this.data.videoInfo.userRead.lessonText;
  179. wsEngine.start({
  180. request: {
  181. coreType: "cn.pred.raw",
  182. refText: lessonText,
  183. rank: 100,
  184. attachAudioUrl: 1,
  185. result: {
  186. details: {
  187. gop_adjust: 1
  188. }
  189. }
  190. },
  191. app,
  192. audio: {
  193. audioType: "mp3",
  194. channel: 1,
  195. sampleBytes: 2,
  196. sampleRate: 16000
  197. },
  198. success: (res) => {
  199. /*引擎启动成功,可以启动录音机开始录音,并将音频片传给引擎*/
  200. const options = {
  201. sampleRate: 44100, //采样率
  202. numberOfChannels: 1, //录音通道数
  203. encodeBitRate: 192000, //编码码率
  204. format: 'mp3', //音频格式,有效值aac/mp3
  205. frameSize: 50 //指定帧大小,单位 KB
  206. };
  207. //开始录音,在开始录音回调中feed音频片
  208. recorderManager.start(options);
  209. },
  210. fail: (res) => {
  211. console.log("fail============= " + res);
  212. },
  213. });
  214. //监听录音开始事件
  215. recorderManager.onStart(() => {});
  216. //监听录音结束事件
  217. recorderManager.onStop((res) => {
  218. console.log('录音结束', res);
  219. this.setData({
  220. tempFilePath: res.tempFilePath,
  221. });
  222. //录音机结束后,驰声引擎执行结束操作,等待评测返回结果
  223. wsEngine.stop({
  224. success: () => {
  225. console.log('====== wsEngine stop success ======');
  226. },
  227. fail: (res) => {
  228. console.log('录音结束报错', res);
  229. },
  230. });
  231. });
  232. //监听已录制完指定帧大小的文件事件。如果设置了 frameSize,则会回调此事件。
  233. recorderManager.onFrameRecorded((res) => {
  234. const {
  235. frameBuffer
  236. } = res
  237. //TODO 调用feed接口传递音频片给驰声评测引擎
  238. wsEngine.feed({
  239. data: frameBuffer, // frameBuffer为微信录音机回调的音频数据
  240. success: () => {
  241. console.log('feed success.监听已录制完指定帧大小的文件事件')
  242. },
  243. fail: (res) => {
  244. console.log('监听已录制完指定帧大小报错', res)
  245. },
  246. });
  247. });
  248. },
  249. // 结束录制
  250. finishRecord() {
  251. recorderManager.stop();
  252. this.videoContext.stop()
  253. this.videoContext.seek(0)
  254. clearTimeout(this.setTimeoutObj)
  255. clearInterval(this.stl)
  256. this.setData({
  257. state: false,
  258. currentRow: null,
  259. scrollTop: 0
  260. })
  261. },
  262. // 倒计时
  263. startRecording() {
  264. if (this.data.currentRow == null) {
  265. this.setData({
  266. currentRow: 0
  267. })
  268. }
  269. let row = this.data.article[this.data.currentRow]
  270. if (!row.readTime) {
  271. return
  272. }
  273. this.setTimeoutObj = setTimeout(() => {
  274. this.setData({
  275. currentRow: ++this.data.currentRow
  276. })
  277. this.setData({
  278. scrollTop: this.rowH * this.data.currentRow
  279. })
  280. this.startRecording()
  281. },
  282. row.readTime);
  283. },
  284. // 视频播放结束
  285. videoEnd() {
  286. this.finishRecord()
  287. },
  288. // 获取测评结果
  289. getRecordScore(res) {
  290. const result = res.result;
  291. const integrity = Math.floor(result.integrity); //完成度
  292. const tone = Math.floor(result.tone); // 语调声调
  293. const accuracy = Math.floor(result.overall); // 准确度 发音分
  294. const fluency = Math.floor(result.fluency.overall); //流利度
  295. let myOverall = Math.floor(integrity * 0.3 + accuracy * 0.5 + fluency * 0.1 + tone * 0.1);
  296. let detail = {
  297. integrity,
  298. tone,
  299. accuracy,
  300. fluency,
  301. myOverall,
  302. tempFilePath: this.data.tempFilePath,
  303. title: this.data.videoInfo.userRead.title,
  304. id: this.data.videoInfo.userRead.exampleId,
  305. }
  306. this.setReadDetail(detail)
  307. wx.redirectTo({
  308. url: `/pages/score/index`,
  309. })
  310. },
  311. videoPlay() {
  312. if (this.data.readingReset) {
  313. this.innerAudioContext = wx.createInnerAudioContext();
  314. this.innerAudioContext.src = this.data.readDetail.tempFilePath; // 这里可以是录音的临时路径
  315. this.innerAudioContext.play();
  316. }
  317. },
  318. // 清除试听状态
  319. clearReset() {
  320. if (this.innerAudioContext) {
  321. this.innerAudioContext.stop()
  322. }
  323. this.videoContext.stop()
  324. this.videoContext.seek(0)
  325. this.setData({
  326. readingReset: false
  327. })
  328. },
  329. // 获取设备高度与行高度
  330. getHeight() {
  331. var query = wx.createSelectorQuery();
  332. query.select('.content').boundingClientRect((rect) => {
  333. this.setData({
  334. contentH: rect.height
  335. })
  336. }).exec()
  337. query.select('.row').boundingClientRect((rect) => {
  338. this.rowH = rect.height
  339. }).exec()
  340. },
  341. /**
  342. * 生命周期函数--监听页面卸载
  343. */
  344. onUnload() {
  345. wsEngine.reset()
  346. recorderManager.stop();
  347. if (this.innerAudioContext) {
  348. this.innerAudioContext.stop()
  349. }
  350. clearTimeout(this.setTimeoutObj)
  351. clearInterval(this.stl)
  352. },
  353. onShareAppMessage() {
  354. }
  355. })