Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

long_audio.vue 12 KiB

vor 2 Jahren
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462
  1. <template>
  2. <view>
  3. <!-- 播放块 -->
  4. <view class="bottomhead">
  5. <view class="audio-play" @tap="changePlayState">
  6. <image class="image" mode="widthFix"
  7. :src="audioPlay ? 'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/pause.png' : 'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/play.png'">
  8. </image>
  9. </view>
  10. <view class="audio-slider">
  11. <view class="audio-time">
  12. <text>{{currentTimeStr}}</text>
  13. </view>
  14. <slider class="slider" min="0" :max="sliderMax" @change="sliderChangeComplate" block-size="14"
  15. :value="sliderValue" activeColor="blue"></slider>
  16. <view class="audio-time">
  17. <text>{{timeStr}}</text>
  18. </view>
  19. </view>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. var util = require("@/utils/util.js");
  25. var config = require("@/config");
  26. export default {
  27. name: "long_audio",
  28. data() {
  29. return {
  30. audioPlay: false, //当前的播放状态控制
  31. sliderValue: 0, //进度条最小值
  32. sliderMax: 0, //进度条最大值
  33. innerAudioContext:null, //播放实例
  34. currentTimeStr: "00:00", //当前进度的时间
  35. timeStr: "00:00", //总的时间
  36. recordPath: "",
  37. luyinList: [], //录音文件
  38. newluyinList: [],
  39. dialogList: [], //录音识别列表
  40. csdFileindex: 0,
  41. date: "", //年月日
  42. scrollId: "",
  43. playNow: 0,
  44. alltimeStr: "00:00:00",
  45. };
  46. },
  47. props:{
  48. customerId:'',
  49. infos:null,
  50. roleindex:0
  51. },
  52. mounted() {
  53. this.roleindex = 0;
  54. this.innerAudioContext = uni.createInnerAudioContext();
  55. this.innerAudioContext.autoplay = false;
  56. this.innerAudioContext.title = '音频';
  57. this.onPlay()
  58. this.onPause()
  59. this.onCanplay()
  60. this.onEnded()
  61. this.onSeeking()
  62. this.onSeeked()
  63. this.TimeUpdate()
  64. this.init(this.infos)
  65. },
  66. destroyed() {
  67. //暂停
  68. this.innerAudioContext.pause()
  69. // 销毁
  70. // this.innerAudioContext.destroy();
  71. },
  72. methods: {
  73. onPlay() {
  74. this.innerAudioContext.onPlay(() => {
  75. // 播放监听
  76. console.log('播放!');
  77. this.audioPlay = true;
  78. wx.enableAlertBeforeUnload({
  79. message: "是否确认退出详情页面?",
  80. success: function(res) {
  81. console.log("方法注册成功:", res);
  82. },
  83. fail: function(errMsg) {
  84. console.log("方法注册失败:", errMsg);
  85. },
  86. });
  87. });
  88. },
  89. onPause() {
  90. this.innerAudioContext.onPause(() => {
  91. wx.disableAlertBeforeUnload({
  92. success: function(res) {
  93. console.log(res)
  94. },
  95. fail: function(e) {
  96. console.log(e)
  97. }
  98. });
  99. // 暂停监听
  100. console.log('暂停播放!');
  101. this.audioPlay = false
  102. });
  103. },
  104. onCanplay() {
  105. this.innerAudioContext.onCanplay((callback) => {
  106. console.log("缓冲回调", this.innerAudioContext.duration);
  107. })
  108. },
  109. onEnded() {
  110. this.innerAudioContext.onEnded(() => {
  111. // 结束播放监听
  112. console.log('播放结束!');
  113. this.audioPlay = false;
  114. });
  115. },
  116. onSeeking() {
  117. this.innerAudioContext.onSeeking((res) => {
  118. console.log("进行跳转", res);
  119. })
  120. },
  121. onSeeked() {
  122. this.innerAudioContext.onSeeked((res) => {
  123. console.log("结束跳转", res);
  124. this.$forceUpdate()
  125. });
  126. },
  127. TimeUpdate() {
  128. this.innerAudioContext.onTimeUpdate(() => {
  129. // var pages = getCurrentPages();
  130. // if(pages[pages.length-1].route!="pages/mine/details2"){
  131. // this.innerAudioContext.destroy();
  132. // }
  133. const {
  134. currentTime,
  135. duration
  136. } = this.innerAudioContext;
  137. console.log(currentTime, 'TimeUpdate, currentTime')
  138. this.playNow = parseInt(currentTime * 1000)
  139. uni.$emit("playNows", this.playNow)
  140. console.log(this.playNow)
  141. if (this.dialogList.length == 0) {
  142. return
  143. } else {
  144. const message = this.dialogList[0].message;
  145. for (let i = 0; i < message.length; i++) {
  146. if (Number(message[i].bg) < this.playNow && Number(message[i].ed) > this.playNow) {
  147. this.scrollId = "dialog" + this.csdFileindex + "text" + message[i].bg;
  148. uni.$emit("scrollIds", this.scrollId)
  149. break;
  150. }
  151. }
  152. }
  153. const currTimeStr = this.formatTime(currentTime);
  154. this.sliderValue = parseInt(currentTime);
  155. // 变动的时间
  156. this.currentTimeStr = currTimeStr;
  157. //进度条最大值
  158. this.sliderMax = this.luyinList[this.csdFileindex].recordDuration;
  159. this.$forceUpdate()
  160. });
  161. },
  162. //分角色标记刷新
  163. fenjiaoseunfo() {
  164. var bgcd = this.sliderValue * 1000;
  165. this.newluyinList = [];
  166. this.dialogList = [];
  167. uni.request({
  168. url: config.service.getCorpusAnal + '?corpusId=' + this.luyinList[this.csdFileindex].id +
  169. "&bg=" + bgcd + "&speaker=" + this.roleindex + '&num=50', //仅为示例,并非真实接口地址。
  170. method: "GET",
  171. header: {
  172. 'content-type': 'application/json',
  173. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  174. },
  175. success: (data) => {
  176. this.tablist = [];
  177. let jsonInfo = JSON.parse(data.data.data.audioContent);
  178. for (var i = 0; i <= data.data.data.speakerNum; i++) {
  179. if (i === 0) {
  180. this.tablist.push({
  181. name: '全部'
  182. })
  183. } else {
  184. this.tablist.push({
  185. name: String.fromCharCode(i + 64)
  186. })
  187. }
  188. }
  189. if (data.data.data.speaker == null) {
  190. this.roleindexbiaoji = 0;
  191. this.dshfkjsdkksodofydwfkhwdfkjh = 0;
  192. } else {
  193. this.tablist[data.data.data.speaker].name = this.tablist[data.data.data.speaker]
  194. .name + "顾问";
  195. this.roleindexbiaoji = data.data.data.speaker - 1;
  196. this.dshfkjsdkksodofydwfkhwdfkjh = data.data.data.speaker - 1;
  197. }
  198. if (this.roleindex > this.tablist.length - 1) {
  199. this.roleindex = this.tablist.length - 1
  200. this.fenjiaoseunfo()
  201. }
  202. this.speaker = data.data.data.speaker;
  203. //上拉标记点
  204. this.textindex = data.data.data.index;
  205. //下拉标记点
  206. this.toptextindex = data.data.data.index;
  207. jsonInfo.forEach(item => {
  208. item.message = JSON.parse(item.onebest)
  209. item.backindex = this.csdFileindex
  210. })
  211. console.log(jsonInfo)
  212. this.newluyinList = jsonInfo;
  213. if (this.textindex == null) {
  214. return
  215. } else {
  216. this.dialogList.push(jsonInfo[this.textindex]);
  217. }
  218. }
  219. })
  220. },
  221. // 获取转义后的对话结果
  222. getCorpusAnalysis(info) {
  223. this.dialogList = [];
  224. this.newluyinList = []
  225. uni.request({
  226. url: config.service.getCorpusAnal + '?corpusId=' + this.luyinList[this.csdFileindex].id +
  227. "&bg=" + info.bg + "&speaker=" + this.roleindex + '&num=50', //仅为示例,并非真实接口地址。
  228. method: "GET",
  229. header: {
  230. 'content-type': 'application/json',
  231. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  232. },
  233. success: (data) => {
  234. this.tablist = [];
  235. this.roleindexbiaoji = 0;
  236. let jsonInfo = JSON.parse(data.data.data.audioContent);
  237. for (var i = 0; i <= data.data.data.speakerNum; i++) {
  238. if (i === 0) {
  239. this.tablist.push({
  240. name: '全部'
  241. })
  242. } else {
  243. this.tablist.push({
  244. name: String.fromCharCode(i + 64)
  245. })
  246. }
  247. }
  248. if (data.data.data.speaker == null) {
  249. this.dshfkjsdkksodofydwfkhwdfkjh = 0;
  250. } else {
  251. this.tablist[data.data.data.speaker].name = this.tablist[data.data.data.speaker]
  252. .name + "顾问";
  253. this.roleindexbiaoji = data.data.data.speaker - 1;
  254. this.dshfkjsdkksodofydwfkhwdfkjh = data.data.data.speaker - 1;
  255. }
  256. this.speaker = data.data.data.speaker;
  257. //上拉标记点
  258. this.textindex = data.data.data.index;
  259. //下拉标记点
  260. this.toptextindex = data.data.data.index;
  261. jsonInfo.forEach(item => {
  262. item.message = JSON.parse(item.onebest)
  263. item.backindex = this.csdFileindex;
  264. if (info.onebest) {
  265. item.message.forEach(che => {
  266. if (che.onebest == info.onebest) {
  267. che.onebest =
  268. `<font style='color: red'>${che.onebest}</font>`;
  269. }
  270. })
  271. }
  272. })
  273. this.newluyinList = jsonInfo;
  274. this.dialogList.push(jsonInfo[this.textindex]);
  275. var itc = parseInt(info.bg / 1000)
  276. this.adasdasdasd(itc)
  277. }
  278. })
  279. },
  280. init(info) {
  281. this.sliderMax = 0; //进度条最大值
  282. this.timeStr = "00:00"; //总的时间
  283. const parames = {
  284. pageNum: 1,
  285. pageSize: 100,
  286. query: {
  287. customerId: this.customerId
  288. }
  289. }
  290. this.$u.post("/corpus/findByPage", parames).then(res => {
  291. if (res && res.length) {
  292. let alltime = 1 + res[0].recordDuration;
  293. this.calibration = res[0].calibration;
  294. if (this.calibration == 0) {
  295. this.kehuyixiangcenterindex = 0;
  296. } else {
  297. this.kehuyixiangcenterindex = 1;
  298. }
  299. this.alltimeStr = this.getTime(alltime)
  300. if (info.bg != 0) {
  301. this.luyinList = res;
  302. this.recordPath = res[0].recordPath
  303. this.sliderMax = this.getTime(res[0].recordDuration)
  304. this.timeStr = this.getTime(res[0].recordDuration)
  305. this.date = res[0].receptionTime;
  306. this.getCorpusAnalysis(info);
  307. this.creatAudio()
  308. } else {
  309. this.luyinList = res;
  310. this.recordPath = res[0].recordPath
  311. this.sliderMax = this.getTime(res[0].recordDuration)
  312. this.timeStr = this.getTime(res[0].recordDuration)
  313. this.date = res[0].receptionTime;
  314. this.getCorpusAnalysis(info);
  315. this.creatAudio()
  316. }
  317. }
  318. })
  319. },
  320. //搜索跳转
  321. adasdasdasd(e) {
  322. const currTimeStr = this.formatTime(e)
  323. this.currentTimeStr = currTimeStr
  324. this.innerAudioContext.seek(e);
  325. if (uni.getStorageSync('entrance') == 1) {
  326. return
  327. } else {
  328. this.innerAudioContext.play();
  329. }
  330. },
  331. getTime(time) {
  332. return util.formatSecond(time)
  333. },
  334. // 录音暂停播放
  335. changePlayState() {
  336. if (this.audioPlay == false) {
  337. this.innerAudioContext.play();
  338. } else {
  339. this.innerAudioContext.pause()
  340. }
  341. },
  342. //音频前进回退
  343. sliderChangeComplate(e) {
  344. let platetime = e.detail.value * 1000;
  345. this.dialogList = []
  346. uni.request({
  347. url: config.service.fastForward + '?corpusId=' + this.luyinList[this.csdFileindex].id +
  348. "&bg=" + platetime, //仅为示例,并非真实接口地址。
  349. method: "GET",
  350. header: {
  351. 'content-type': 'application/json',
  352. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  353. },
  354. success: (data) => {
  355. this.textindex = data.data.data.index;
  356. this.toptextindex = data.data.data.index;
  357. if (data.data.data.index > this.newluyinList.length) {
  358. this.dialogList.push(this.newluyinList[0])
  359. } else {
  360. this.dialogList.push(this.newluyinList[data.data.data.index])
  361. }
  362. console.log(e.detail, '1233333333333333333333333333333333333333333333333333333333333')
  363. const currTimeStr = this.formatTime(e.detail.value)
  364. this.currentTimeStr = currTimeStr
  365. this.innerAudioContext.seek(e.detail.value);
  366. this.innerAudioContext.play();
  367. }
  368. })
  369. },
  370. //录音实例
  371. creatAudio() {
  372. this.innerAudioContext = uni.createInnerAudioContext();
  373. if (uni.getStorageSync('entrance') == 1) {
  374. this.innerAudioContext.autoplay = false;
  375. } else {
  376. this.innerAudioContext.autoplay = true;
  377. }
  378. this.innerAudioContext.src = this.recordPath;
  379. this.innerAudioContext.title = '音频';
  380. this.onPlay()
  381. this.onPause()
  382. this.onCanplay()
  383. this.onEnded()
  384. this.onSeeking()
  385. this.onSeeked()
  386. this.TimeUpdate()
  387. },
  388. formatTime(num) {
  389. //格式化时间格式
  390. num = num.toFixed(0);
  391. let second = num % 60;
  392. if (second < 10) second = '0' + second;
  393. let min = Math.floor(num / 60);
  394. if (min < 10) min = '0' + min;
  395. return min + ":" + second;
  396. },
  397. }
  398. }
  399. </script>
  400. <style lang="scss">
  401. .bottomhead {
  402. width: 100%;
  403. height: 81rpx;
  404. border-bottom: 1px solid #E0E0E0;
  405. display: flex;
  406. justify-content: space-between;
  407. align-items: center;
  408. .audio-slider {
  409. width: 87%;
  410. display: flex;
  411. justify-content: space-between;
  412. align-items: center;
  413. padding-right: 30rpx;
  414. }
  415. .audio-slider .slider {
  416. width: 100%;
  417. padding: 0px 15rpx;
  418. box-sizing: border-box;
  419. }
  420. .audio-time {
  421. width: 110rpx;
  422. text-align: right;
  423. font-size: 26rpx;
  424. line-height: 28rpx;
  425. color: #70798D;
  426. display: flex;
  427. justify-content: space-between;
  428. }
  429. .audio-play {
  430. width: 48rpx;
  431. height: 48rpx;
  432. flex-shrink: 0;
  433. }
  434. .audio-play .image {
  435. width: 100%;
  436. height: 100%;
  437. margin-left: 30rpx;
  438. }
  439. }
  440. </style>