reading.js 19 KB

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