reading.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577
  1. import httpRequestApi from '../../utils/APIClient';
  2. import {
  3. formatDate
  4. } from '../../utils/util';
  5. Page({
  6. data: {
  7. title: '',
  8. id: '',
  9. img: '',
  10. fullScreenBtn: false,
  11. playBtn: true,
  12. gesture: true,
  13. muted: false,
  14. gesture: false,
  15. centerBtn: true,
  16. recordFlag: 0,
  17. recordSource: '',
  18. videoCtr: 'recordingVideoEnd',
  19. btnFlag: false,
  20. btnImgFlag: false,
  21. microphonePng: '../../static/index/microphone.png',
  22. recordingGif: '../../static/index/readingNow.gif',
  23. videoUrl: '',
  24. readingText: '',
  25. videoList: [],
  26. pageNo: 1,
  27. nextMargin: getApp().globalData.nextMargin,
  28. lowerThresHold: 100,
  29. isVideoListShow: true,
  30. overall: '', // 评测总分
  31. integrity: '', //完成度
  32. tone: '', //语调声调
  33. fluency: '', //流利度
  34. accuracy: '', // 正确分,发音分
  35. star: [0, 0, 0, 0, 0],
  36. ifTextShow: true,
  37. ifScoreDialogShow: false,
  38. ifScoreShow: false
  39. },
  40. onLoad: function (option) {
  41. console.log(option);
  42. this.videoCtx = null;
  43. const uid = wx.getStorageSync('uid')
  44. this.getClassInfo(option.id);
  45. // this.getMicAuth()
  46. },
  47. getClassInfo: function (id) {
  48. httpRequestApi.getClassDetail(id).success(res => {
  49. console.log('课程信息', res)
  50. let reg = /\\n/g
  51. this.setData({
  52. title: res.data.data.userRead.title,
  53. videoUrl: res.data.data.userRead.videoPath,
  54. originVideo: res.data.data.userRead.originVideo,
  55. img: res.data.data.userRead.iconImg,
  56. id: res.data.data.userRead.id,
  57. readingText: res.data.data.userRead.lessonText,
  58. grade: res.data.data.userRead.grade,
  59. exampleId: res.data.data.userRead.exampleId,
  60. summary: res.data.data.userRead.summary
  61. })
  62. this.getReadInfo(id)
  63. httpRequestApi.userIntoPage('pages/reading/reading', '朗读页面').success((res) => {
  64. })
  65. })
  66. },
  67. onHide: function () {
  68. console.log('onhide')
  69. if (this.data.audioPlaying) {
  70. console.log('返回时状态', this.data.audioPlaying)
  71. this.ss.stopPlay();
  72. }
  73. if (this.data.btnImgFlag) {
  74. this.ss.stopRecord();
  75. }
  76. this.ss.destroyEngine();
  77. this.setData({
  78. recordFlag: 0
  79. })
  80. },
  81. onUnload: function () {
  82. console.log('onUnload')
  83. if (this.data.audioPlaying) {
  84. console.log('销毁时状态', this.data.audioPlaying)
  85. this.ss.stopPlay();
  86. }
  87. if (this.data.btnImgFlag) {
  88. this.ss.stopRecord();
  89. }
  90. this.ss.destroyEngine();
  91. },
  92. onShow: function () {
  93. this.setData({
  94. statusbarobj: {
  95. isshowbtn: false, //是否显示按钮
  96. title: "小学语文课文朗读", //标题
  97. },
  98. })
  99. this.videoCtx = wx.createVideoContext('myVideo', this);
  100. let data = requirePlugin("myPlugin");
  101. const obj = {
  102. appid: 'a415',
  103. userid: wx.getStorageSync('uid'),
  104. getEvalMessage: (res) => {
  105. this.getRecordScore(res)
  106. // console.log('评测结果',res)
  107. },
  108. recorderCallback: (type, data) => {
  109. // 录音测评监控回调
  110. this.ssRecorderCallback(type, data)
  111. }
  112. }
  113. this.ss = new data.ssEngine(obj);
  114. },
  115. ssRecorderCallback: function (type, data) {
  116. console.log('录音测评监控回调', type)
  117. console.log('录音测评监控回调', data)
  118. /* 录音开始 */
  119. if (type === 'onStart') {
  120. this.setData({
  121. btnImgFlag: true,
  122. btnFlag: false
  123. })
  124. console.log('recorder start')
  125. }
  126. if (type === 'onStop') {
  127. this.videoCtx.stop();
  128. this.setData({
  129. recordFlag: 0,
  130. recordSource: data.tempFilePath,
  131. btnFlag: true,
  132. btnImgFlag: false
  133. })
  134. console.log('recorder start')
  135. }
  136. },
  137. // 录音中视频播放结束 (控制录音同时结束)
  138. recordingVideoEnd: function () {
  139. console.log(this.data.videoCtr)
  140. console.log('recordingVideoEnd');
  141. //
  142. if (this.data.recordFlag === 0) {
  143. // this.recordStop();
  144. this.playingVideoEnd();
  145. return;
  146. }
  147. // 录音结束
  148. if (this.data.recordFlag === 1) {
  149. this.recordStop();
  150. }
  151. },
  152. // 播放中视频播放结束 (控制录音同时结束)
  153. playingVideoEnd: function () {
  154. console.log('playingVideoEnd')
  155. this.ss.stopPlay();;
  156. },
  157. /***
  158. * recordFlag:
  159. * 0 初始状态
  160. * 1 录音中
  161. * 2 录音结束
  162. ***/
  163. audioRecord: function () {
  164. console.log('recordFlag', this.data.recordFlag)
  165. if (this.data.recordFlag === 0) {
  166. // this.recordStart();
  167. // this.saveVideo();
  168. console.log('是否有视频', this.videoCtx)
  169. if (this.videoCtx) {
  170. this.videoCtx.stop();
  171. // this.videoCtx.seek(0);
  172. }
  173. // if (this.recorderManager) {
  174. // this.recorderManager.stop();
  175. // }
  176. // if (this.innerAudioContext) {
  177. // this.innerAudioContext.stop();
  178. // }
  179. this.getMicAuth()
  180. // this.videoComplete();
  181. return;
  182. }
  183. // 录音结束后
  184. if (this.data.recordFlag === 1) {
  185. wx.showLoading({
  186. title: '作品转码中',
  187. mask: true
  188. })
  189. this.recordStop();
  190. }
  191. },
  192. // 录音开始
  193. /**
  194. * duration: 时长 最长10分钟
  195. sampleRate: 44100, 采样率
  196. numberOfChannels: 1, 录音通道
  197. encodeBitRate: 192000, 码率
  198. format: 'mp3', 格式
  199. frameSize: 50 制定帧大小
  200. */
  201. recordStart: function () {
  202. console.log('录音开始');
  203. const options = {
  204. duration: 600000,
  205. sampleRate: 44100,
  206. numberOfChannels: 1,
  207. encodeBitRate: 192000,
  208. format: 'mp3',
  209. frameSize: 50
  210. }
  211. this.ss.startRecord({
  212. coreType: 'cn.sent.score', //测评题型
  213. evalTime: 300000, //测评的录音时间,时间到自动停止测评
  214. refText: this.data.readingText, //测评文本
  215. warrantId: 'c11163aa6c834a028da4a4b30955be96', //鉴权id
  216. })
  217. },
  218. getMicAuth() {
  219. let _this = this;
  220. wx.getSetting({
  221. success(res) {
  222. if (res.authSetting['scope.record']) {
  223. // that.videoComplete();
  224. _this.videoComplete();
  225. } else {
  226. _this.getMicSetAuth();
  227. return;
  228. }
  229. }
  230. })
  231. },
  232. getMicSetAuth() {
  233. let _this = this;
  234. wx.authorize({
  235. scope: 'scope.record',
  236. success() {
  237. // 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问
  238. _this.audioRecord();
  239. },
  240. fail() {
  241. wx.showModal({
  242. title: '录音前请打开麦克风权限',
  243. content: '',
  244. confirmText: '我知道了',
  245. showCancel: false,
  246. success(res) {
  247. // console.log('用户点击确定')
  248. wx.openSetting({
  249. success(res) {
  250. console.log('跳转到设置页', res.authSetting)
  251. // res.authSetting = {
  252. // "scope.userInfo": true,
  253. // "scope.userLocation": true
  254. // }
  255. }
  256. })
  257. }
  258. })
  259. }
  260. })
  261. },
  262. // 录音结束
  263. recordStop: function () {
  264. this.setData({
  265. muted: false
  266. })
  267. this.ss.stopRecord();
  268. console.log('录音结束')
  269. wx.hideLoading()
  270. },
  271. // 获取测评结果
  272. getRecordScore(res) {
  273. console.log('测评结果', res)
  274. const result = res.result;
  275. const overall = result.overall; // 总分
  276. const integrity = result.integrity; //完成度
  277. const tone = result.tone; // 语调声调
  278. const accuracy = result.accuracy; // 发音分
  279. const fluency = result.fluency.overall; //流利度
  280. let starArray = [];
  281. let score = overall / 20;
  282. if (score <= 0) {
  283. starArray = [0, 0, 0, 0, 0]
  284. } else {
  285. for (let i = 1; i < 5; i += 0.9) {
  286. if (i < score) {
  287. starArray.push(1);
  288. } else {
  289. starArray.push(0)
  290. }
  291. }
  292. }
  293. this.setData({
  294. overall,
  295. integrity,
  296. tone,
  297. accuracy,
  298. fluency,
  299. ifScoreDialogShow: true,
  300. star: starArray
  301. })
  302. },
  303. closeScoreDialog() {
  304. this.setData({
  305. ifScoreDialogShow: false,
  306. ifScoreShow: true,
  307. ifTextShow: false
  308. })
  309. },
  310. // 播放录音
  311. audioPlay: function () {
  312. /* 用了先声智能以后录音播放由先声只能接管 */
  313. this.setData({
  314. videoUrl: this.data.videoUrl
  315. })
  316. if (this.data.audioPath) {
  317. this.ss.startPlay(this.data.audioPath);
  318. this.videoCtx.stop();
  319. this.videoCtx.play();
  320. } else {
  321. const recordSource = this.data.recordSource
  322. wx.uploadFile({
  323. url: 'https://reader-test.efunbox.cn/readerBase/file/upload',
  324. filePath: recordSource,
  325. name: '朗读录音',
  326. header: {
  327. uid: wx.getStorageSync('uid')
  328. },
  329. success: (res) => {
  330. const formateRes = JSON.parse(res.data);
  331. let audioPath = formateRes.data;
  332. this.setData({
  333. audioPath,
  334. audioPlaying: true
  335. })
  336. this.ss.startPlay(audioPath);
  337. // this.videoCtx.seek(0);
  338. this.videoCtx.stop();
  339. console.log('播放器归0')
  340. this.videoCtx.play();
  341. console.log('播放器播放')
  342. }
  343. })
  344. }
  345. },
  346. videoComplete: function () {
  347. // let videoUrl = 'http://efunimgs.ai160.com/ott/test/002tPr2Xlx07oP7B4ro40104120022hP0k010.mp4';
  348. this.setData({
  349. recordFlag: 1,
  350. videoUrl: this.data.originVideo,
  351. centerBtn: false,
  352. playBtn: false,
  353. isVideoListShow: false,
  354. muted: true,
  355. ifTextShow: true,
  356. ifScoreShow: false
  357. }, () => {
  358. this.videoCtx.play();
  359. this.recordStart();
  360. })
  361. },
  362. // 上传
  363. upload: function () {
  364. if (this.videoCtx) {
  365. this.videoCtx.stop();
  366. }
  367. if (this.data.audioPlaying) {
  368. this.ss.stopPlay();
  369. this.setData({
  370. audioPlaying: false
  371. })
  372. }
  373. wx.showLoading({
  374. title: '作品分享中',
  375. mask: true
  376. })
  377. if (this.data.audioPath) {
  378. this.shareWorks(this.data.audioPath)
  379. } else {
  380. const recordSource = this.data.recordSource;
  381. wx.uploadFile({
  382. url: 'https://reader-test.efunbox.cn/readerBase/file/upload',
  383. filePath: recordSource,
  384. name: '朗读录音',
  385. header: {
  386. uid: wx.getStorageSync('uid')
  387. },
  388. success: (res) => {
  389. const formateRes = JSON.parse(res.data);
  390. let audioPath = formateRes.data;
  391. this.shareWorks(audioPath);
  392. }
  393. })
  394. }
  395. },
  396. shareWorks: function (audio) {
  397. const data = {
  398. "lessonId": this.data.id,
  399. "originVideo": this.data.videoUrl,
  400. "audioPath": audio,
  401. "title": this.data.title,
  402. "iconImg": this.data.img,
  403. "summary": this.data.summary,
  404. "productId": this.data.productId,
  405. "grade": this.data.grade,
  406. "exampleId": this.data.exampleId
  407. };
  408. httpRequestApi.postWork(data).success(res => {
  409. wx.hideLoading({
  410. success: () => {
  411. wx.showToast({
  412. title: '上传成功',
  413. icon: 'success',
  414. duration: 1000,
  415. success: () => {
  416. console.log('上传成功', res);
  417. const _data = this.data;
  418. const scoreData = {
  419. "userReadId": res.data.data.id,
  420. "complete": _data.integrity,
  421. "accuracy": _data.accuracy,
  422. "speed": _data.fluency,
  423. "intonation": _data.tone,
  424. "score": _data.overall
  425. }
  426. // 上传评分
  427. httpRequestApi.postWorksScore(scoreData).success(res => {
  428. console.log(res)
  429. });
  430. const pages = getCurrentPages();
  431. const prevPage = pages[pages.length - 2];
  432. console.log('上一个页面', prevPage);
  433. console.log('上一个页面', res.data.data.id);
  434. prevPage.setData({
  435. workId: res.data.data.id, // 有id就塞到第一位
  436. }, () => {
  437. console.log('上一个页面', prevPage);
  438. wx.navigateBack({
  439. delta: 1
  440. })
  441. })
  442. }
  443. })
  444. }
  445. });
  446. });
  447. },
  448. // 获取本课朗读内容
  449. getReadInfo: function (id, pageNo, pageSize) {
  450. // const uid = wx.getStorageSync('uid');
  451. const data = {
  452. exampleId: this.data.id || id,
  453. pageNo: this.data.pageNo,
  454. pageSize: 3,
  455. type: 'READ'
  456. };
  457. httpRequestApi.getClassRead(data).success(res => {
  458. const readInfo = res.data.data.list;
  459. console.log(res)
  460. readInfo.forEach(item => {
  461. const temp = {};
  462. temp.title = item.userRead ? item.userRead.title : '';
  463. temp.img = item.userRead.iconImg;
  464. temp.plays = item.userRead.playAmount ? item.userRead.playAmount : 0;
  465. temp.likes = item.userRead.likeAmount ? item.userRead.likeAmount : 0;
  466. temp.classId = item.userRead.exampleId;
  467. temp.time = formatDate(item.userRead.gmtCreated, 3);
  468. temp.avatar = item.user ? item.user.avatar : '';
  469. temp.uid = item.user ? item.user.uid : '';
  470. temp.url = item.userRead.originVideo;
  471. // temp.avatar = item.user.avatar;
  472. temp.nickName = item.user ? item.user.wechatName : '';
  473. temp.id = item.userRead.id;
  474. temp.noReading = true;
  475. // recommendWorks.push(temp);
  476. // that.data.hotData.hotWorks.push(temp);
  477. this.data.videoList.push(temp);
  478. });
  479. this.setData({
  480. videoList: this.data.videoList
  481. })
  482. });
  483. },
  484. // 评论区点击
  485. commentTap: function (e) {
  486. console.log('点击评论区', e)
  487. if (e.target.dataset.type === 'blank') {
  488. this.setData({
  489. commentShow: false
  490. })
  491. }
  492. },
  493. scrollToLower: function (e) {
  494. console.log('滑动到底部', e)
  495. this.setData({
  496. pageNo: this.data.pageNo + 1
  497. }, () => {
  498. this.getReadInfo()
  499. })
  500. },
  501. scrollToUpper: function (e) {
  502. console.log('滑动到顶部', e)
  503. },
  504. // 打开评论
  505. openComment: function (e) {
  506. console.log('id', e.detail.activeId)
  507. this.setData({
  508. commentShow: !this.data.commentShow,
  509. commentId: e.detail.activeId,
  510. });
  511. },
  512. goToReading: function (e) {
  513. this.setData({
  514. pageNo: 1,
  515. videoList: []
  516. })
  517. const id = e.detail.activeId ? e.detail.activeId : e.currentTarget.dataset.id;
  518. this.getClassInfo(id)
  519. },
  520. onShareAppMessage: function (res) {
  521. console.log('点击分享按钮', res)
  522. console.log('点击分享按钮', this.data.shareTitle)
  523. console.log('点击分享按钮', this.data.shareId)
  524. console.log('点击分享按钮', this.data.shareImg)
  525. if (res.from === 'button') {
  526. return {
  527. title: this.data.shareTitle,
  528. path: `/pages/index/index${this.data.shareId}`,
  529. imageUrl: this.data.shareImg
  530. }
  531. } else {
  532. return {
  533. title: '快来听我的朗读作品吧',
  534. path: '/pages/index/index'
  535. }
  536. }
  537. },
  538. openShare: function (e) {
  539. console.log('用户点击分享按钮', e)
  540. this.setData({
  541. shareTitle: e.detail.currentTarget.dataset.title,
  542. shareId: e.detail.currentTarget.dataset.id,
  543. shareImg: e.detail.currentTarget.dataset.img
  544. })
  545. },
  546. onPlay: function (e) {
  547. // 下边视频列表onplay
  548. if (this.videoCtx) {
  549. this.videoCtx.stop();
  550. } else {
  551. this.videoCtx = wx.createVideoContext('myVideo', this);
  552. this.videoCtx.stop();
  553. }
  554. }
  555. })