reading.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  1. import httpRequestApi from '../../../utils/APIClient';
  2. Page({
  3. data: {
  4. title: '',
  5. id: '',
  6. img: '',
  7. fullScreenBtn: false,
  8. playBtn: false,
  9. gesture: true,
  10. muted: false,
  11. gesture: false,
  12. centerBtn: false,
  13. recordFlag: 0,
  14. recordSource: '',
  15. videoCtr: 'recordingVideoEnd',
  16. btnFlag: false,
  17. btnImgFlag: false,
  18. microphonePng: '../../../static/image/microphone.png',
  19. recordingGif: '../../../static/image/readingNow.gif',
  20. videoUrl: '',
  21. readingText: ''
  22. },
  23. onLoad: function (option) {
  24. console.log(option);
  25. this.videoCtx = null;
  26. const uid = wx.getStorageSync('uid')
  27. httpRequestApi.getClassDetail(uid, option.id).success(res => {
  28. console.log(res)
  29. wx.setNavigationBarTitle({
  30. title: res.data.data.title //页面标题为路由参数
  31. })
  32. let reg = /\\n/g
  33. this.setData({
  34. title: res.data.data.lesson.title,
  35. videoUrl: res.data.data.lesson.accompany || res.data.data.playUrl,
  36. img: res.data.data.lesson.iconImg,
  37. id: res.data.data.lesson.id,
  38. // readingText: res.data.data.lessonText.replace(reg,'')
  39. readingText: res.data.data.lesson.lessonText,
  40. grade: res.data.data.lesson.gradeClassify,
  41. productId: res.data.data.product.id
  42. })
  43. console.log(this.data.readingText)
  44. console.log(this.data.img)
  45. httpRequestApi.userIntoPage('pages/main/reading/reading','朗读页面').success((res)=>{
  46. })
  47. })
  48. this.recorderManager = wx.getRecorderManager();
  49. // 监听录音部分
  50. // 录音开始
  51. this.recorderManager.onStart(() => {
  52. // this.saveVideo();
  53. this.setData({
  54. btnImgFlag: true,
  55. btnFlag: false
  56. })
  57. console.log('recorder start')
  58. })
  59. // this.recorderManager.onPause(() => {
  60. // wx.showToast({
  61. // title: '录音被暂停',
  62. // icon: 'fail',
  63. // duration: 500
  64. // })
  65. // })
  66. // this.recorderManager.onInterruptionBegin(() => {
  67. // wx.showToast({
  68. // title: '录音被应用中断开始',
  69. // icon: 'fail',
  70. // duration: 500
  71. // })
  72. // })
  73. // this.recorderManager.onInterruptionEnd(() => {
  74. // wx.showToast({
  75. // title: '录音中断结束',
  76. // icon: 'fail',
  77. // duration: 500
  78. // })
  79. // })
  80. let dialogFlag = true;
  81. this.recorderManager.onError(() => {
  82. wx.getSetting({
  83. success(res) {
  84. if (!res.authSetting['scope.record'] && dialogFlag) {
  85. wx.showModal({
  86. title: '录音前请打开麦克风权限',
  87. content: '点击右上角浮点...,选择:设置-麦克风,点击/打开。',
  88. confirmText: '我知道了',
  89. showCancel: false,
  90. success(res) {
  91. console.log('用户点击确定')
  92. // dialogFlag = false;
  93. }
  94. })
  95. dialogFlag = false;
  96. setTimeout(() => {
  97. dialogFlag = true;
  98. },1000)
  99. }
  100. // else {
  101. // wx.showToast({
  102. // title: 'onError',
  103. // icon: 'fail',
  104. // duration: 500
  105. // })
  106. // }
  107. }
  108. })
  109. })
  110. // 录音结束
  111. this.recorderManager.onStop((res) => {
  112. // wx.showToast({
  113. // title: 'onStop',
  114. // icon: 'fail',
  115. // duration: 500
  116. // })
  117. this.videoCtx.stop();
  118. console.log('recorder stop', res)
  119. const recordFile = res.tempFilePath;
  120. this.setData({
  121. recordFlag: 0,
  122. recordSource: recordFile,
  123. btnFlag: true,
  124. btnImgFlag: false
  125. })
  126. })
  127. },
  128. onHide: function () {
  129. console.log('onhide')
  130. if (this.data.btnImgFlag) {
  131. this.recorderManager.stop();
  132. }
  133. if (this.innerAudioContext) {
  134. this.innerAudioContext.stop();
  135. }
  136. this.setData({
  137. recordFlag: 0
  138. })
  139. },
  140. onUnload: function () {
  141. console.log('onUnload')
  142. if (this.recorderManager) {
  143. this.recorderManager.stop();
  144. }
  145. if (this.innerAudioContext) {
  146. this.innerAudioContext.stop();
  147. }
  148. },
  149. // onShow:function(){
  150. // },
  151. // 视频缓冲
  152. // videoWaiting: function () {
  153. // this.recorderManager.pause();
  154. // },
  155. // //视频播放
  156. // videoPlay: function () {
  157. // this.recorderManager.resume();
  158. // },
  159. // 录音中视频播放结束 (控制录音同时结束)
  160. recordingVideoEnd: function () {
  161. console.log(this.data.videoCtr)
  162. console.log('recordingVideoEnd');
  163. //
  164. if (this.data.recordFlag === 0) {
  165. // this.recordStop();
  166. this.playingVideoEnd();
  167. return;
  168. }
  169. // 录音结束
  170. if (this.data.recordFlag === 1) {
  171. this.recordStop();
  172. }
  173. },
  174. // 播放中视频播放结束 (控制录音同时结束)
  175. playingVideoEnd: function () {
  176. console.log('playingVideoEnd')
  177. this.innerAudioContext.stop();
  178. },
  179. /***
  180. * recordFlag:
  181. * 0 初始状态
  182. * 1 录音中
  183. * 2 录音结束
  184. ***/
  185. audioRecord: function () {
  186. console.log(this.data.recordFlag)
  187. if (this.data.recordFlag === 0) {
  188. // this.recordStart();
  189. // this.saveVideo();
  190. if (this.videoCtx) {
  191. this.videoCtx.stop();
  192. }
  193. if (this.recorderManager) {
  194. this.recorderManager.stop();
  195. }
  196. if (this.innerAudioContext) {
  197. this.innerAudioContext.stop();
  198. }
  199. const that = this;
  200. wx.getSetting({
  201. success(res) {
  202. if (res.authSetting['scope.record']) {
  203. that.videoComplete();
  204. }
  205. // else {
  206. // wx.showToast({
  207. // title: 'onError',
  208. // icon: 'fail',
  209. // duration: 500
  210. // })
  211. // }
  212. }
  213. })
  214. return;
  215. }
  216. // 录音结束后
  217. if (this.data.recordFlag === 1) {
  218. wx.showLoading({
  219. title: '作品转码中',
  220. mask: true
  221. })
  222. this.recordStop();
  223. }
  224. },
  225. // 录音开始
  226. /**
  227. * duration: 时长 最长10分钟
  228. sampleRate: 44100, 采样率
  229. numberOfChannels: 1, 录音通道
  230. encodeBitRate: 192000, 码率
  231. format: 'mp3', 格式
  232. frameSize: 50 制定帧大小
  233. */
  234. recordStart: function () {
  235. console.log('录音开始');
  236. const options = {
  237. duration: 600000,
  238. sampleRate: 44100,
  239. numberOfChannels: 1,
  240. encodeBitRate: 192000,
  241. format: 'mp3',
  242. frameSize: 50
  243. }
  244. this.recorderManager.start(options);
  245. },
  246. // 录音结束
  247. recordStop: function () {
  248. console.log('录音结束')
  249. this.recorderManager.stop();
  250. wx.hideLoading()
  251. },
  252. // 播放录音
  253. audioPlay: function () {
  254. console.log('音频播放');
  255. if (this.innerAudioContext) {
  256. this.innerAudioContext.stop();
  257. this.videoCtx.stop();
  258. }
  259. this.innerAudioContext = wx.createInnerAudioContext();
  260. this.innerAudioContext.src = this.data.recordSource; // 这里可以是录音的临时路径
  261. console.log(this.innerAudioContext.src);
  262. this.videoCtx.play();
  263. this.innerAudioContext.play();
  264. },
  265. videoComplete: function () {
  266. // let videoUrl = 'http://efunimgs.ai160.com/ott/test/002tPr2Xlx07oP7B4ro40104120022hP0k010.mp4';
  267. this.setData({
  268. recordFlag: 1
  269. }, () => {
  270. })
  271. this.videoCtx = wx.createVideoContext('myVideo', this);
  272. this.videoCtx.play();
  273. this.recordStart();
  274. },
  275. // 上传
  276. upload: function () {
  277. if (this.videoCtx) {
  278. this.videoCtx.stop();
  279. }
  280. if (this.recorderManager) {
  281. this.recorderManager.stop();
  282. }
  283. if (this.innerAudioContext) {
  284. this.innerAudioContext.stop();
  285. }
  286. wx.showLoading({
  287. title: '作品分享中',
  288. mask: true
  289. })
  290. const recordSource = this.data.recordSource;
  291. wx.uploadFile({
  292. url: 'https://reader.lingjiao.cn/readerBase/file/upload',
  293. filePath: recordSource,
  294. name: '朗读录音',
  295. header: {
  296. uid: wx.getStorageSync('uid')
  297. },
  298. success: (res) => {
  299. const formateRes = JSON.parse(res.data);
  300. let audioPath = formateRes.data;
  301. let uid = wx.getStorageSync('uid');
  302. shareWorks(uid, audioPath);
  303. }
  304. })
  305. let shareWorks = (uid, audio) => {
  306. if (this.innerAudioContext) {
  307. this.innerAudioContext.stop();
  308. }
  309. const data = {
  310. "lessonId": this.data.id,
  311. "originVideo": this.data.videoUrl,
  312. "audioPath": audio,
  313. "title": this.data.title,
  314. "iconImg": this.data.img,
  315. "summary": this.data.grade,
  316. productId: this.data.productId
  317. };
  318. httpRequestApi.postWork(uid, data).success(res => {
  319. wx.hideLoading({
  320. success: () => {
  321. wx.showToast({
  322. title: '上传成功',
  323. icon: 'success',
  324. duration: 1000,
  325. success: () => {
  326. console.log(res);
  327. wx.redirectTo({
  328. url: `../../social/works/works?id=${res.data.data.id}&flowerCount=${res.data.count}`
  329. })
  330. }
  331. })
  332. }
  333. });
  334. })
  335. };
  336. }
  337. })