reading.js 20 KB

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