VoiceMatrixFullscreenAudio.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476
  1. <template>
  2. <div :class="['Audio', 'AudioFull']">
  3. <div
  4. :class="['audioLine3', bgIndex == 1 ? 'audioLine3-green' : '']"
  5. @click="hasSelectedCell ? parentPalyAudio() : PlayAudio()"
  6. >
  7. <div
  8. class="play"
  9. :class="[
  10. audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn',
  11. ]"
  12. />
  13. </div>
  14. <audio
  15. :id="audioId"
  16. :ref="audioId"
  17. :src="mp3"
  18. preload="meta"
  19. @loadedmetadata="onLoadedmetadata"
  20. @timeupdate="onTimeupdate"
  21. @canplaythrough="oncanplaythrough"
  22. />
  23. </div>
  24. </template>
  25. <script>
  26. export default {
  27. props: [
  28. "mp3",
  29. "bgIndex",
  30. "getCurTime",
  31. "stopAudio",
  32. "width",
  33. "isRepeat",
  34. "themeColor",
  35. "hideSlider",
  36. "ed",
  37. "bg",
  38. "audioId",
  39. "type",
  40. "hasSelectedCell",
  41. ],
  42. data() {
  43. // 这里存放数据
  44. return {
  45. playValue: 0,
  46. audio: {
  47. // 该字段是音频是否处于播放状态的属性
  48. playing: false,
  49. // 音频当前播放时长
  50. currentTime: 0,
  51. // 音频最大播放时长
  52. maxTime: 0,
  53. isPlaying: false,
  54. loading: false,
  55. },
  56. audioAllTime: null, // 展示总时间
  57. duioCurrentTime: null, // 剩余时间
  58. count: 0,
  59. loading: null,
  60. isClick: false,
  61. };
  62. },
  63. // 计算属性 类似于data概念
  64. computed: {
  65. sliderWidth() {
  66. let width = 0;
  67. if (this.width) {
  68. width = this.width;
  69. } else {
  70. width = 662;
  71. }
  72. return width;
  73. },
  74. },
  75. // 监控data中数据变化
  76. watch: {
  77. stopAudio: {
  78. handler(val) {
  79. if (val) {
  80. this.$refs[this.audioId].pause();
  81. this.audio.playing = false;
  82. }
  83. }
  84. },
  85. "audio.playing": {
  86. handler(val) {
  87. this.$emit("playChange", val);
  88. },
  89. },
  90. },
  91. mounted() {
  92. let audioId = this.audioId;
  93. this.$refs[audioId].addEventListener("loadstart", () => {});
  94. this.$refs[audioId].addEventListener("play", () => {
  95. this.audio.playing = true;
  96. this.audio.isPlaying = true;
  97. this.audio.loading = false;
  98. });
  99. this.$refs[audioId].addEventListener("pause", () => {
  100. this.audio.playing = false;
  101. if (this.hideSlider && this.audio.currentTime * 1000 + 500 > this.ed) {
  102. this.$emit("sentPause", true);
  103. }
  104. this.$emit("handleListenRead", false);
  105. });
  106. this.$refs[audioId].addEventListener("ended", () => {
  107. this.audio.playing = false;
  108. this.audio.isPlaying = false;
  109. this.$emit("handleListenRead", false);
  110. this.isClick = false;
  111. });
  112. this.$nextTick(() => {
  113. document
  114. .getElementsByClassName("el-slider__button-wrapper")[0]
  115. .addEventListener("mousedown", () => {
  116. this.$refs[audioId].pause();
  117. this.audio.playing = false;
  118. });
  119. });
  120. },
  121. methods: {
  122. parentPalyAudio() {
  123. if (this.hasSelectedCell) {
  124. return this.$emit("parentPlayAudio");
  125. }
  126. },
  127. PlayAudio() {
  128. let audioId = this.audioId;
  129. let audio = document.getElementsByTagName("audio");
  130. audio.forEach(item => {
  131. if (item.src == this.mp3) {
  132. if (item.id !== audioId) {
  133. item.pause();
  134. }
  135. } else {
  136. item.pause();
  137. }
  138. });
  139. let video = document.getElementsByTagName("video");
  140. video.forEach(vItem => {
  141. vItem.pause();
  142. });
  143. if (this.audio.playing) {
  144. this.$refs[audioId].pause();
  145. this.audio.playing = false;
  146. this.$emit("handleListenRead", false);
  147. this.isClick = false;
  148. } else {
  149. if (this.count == 0) {
  150. this.audio.loading = true;
  151. this.count++;
  152. }
  153. if (this.hideSlider) {
  154. this.$refs[audioId].play();
  155. this.onTimeupdateTime(this.bg / 1000);
  156. } else {
  157. this.$refs[audioId].play();
  158. }
  159. this.$emit("handleChangeStopAudio");
  160. this.$emit("handleListenRead", true);
  161. this.isClick = true;
  162. }
  163. },
  164. oncanplaythrough() {
  165. // setTimeout(() => {
  166. this.audio.loading = false;
  167. // }, 10000);
  168. },
  169. // 点击 拖拽播放音频
  170. changeCurrentTime(value) {
  171. let audioId = this.audioId;
  172. this.$refs[audioId].play();
  173. this.audio.playing = true;
  174. this.$refs[audioId].currentTime = parseInt(
  175. (value / 100) * this.audio.maxTime
  176. );
  177. },
  178. mousedown() {
  179. let audioId = this.audioId;
  180. this.$refs[audioId].pause();
  181. this.audio.playing = false;
  182. },
  183. // 进度条格式化toolTip
  184. formatProcessToolTip(index) {
  185. return this.realFormatSecond(
  186. parseInt((this.audio.maxTime / 100) * index)
  187. );
  188. },
  189. // 音频加载完之后
  190. onLoadedmetadata(res) {
  191. this.audio.maxTime = parseInt(res.target.duration);
  192. this.audioAllTime = this.realFormatSecond(this.audio.maxTime);
  193. },
  194. // 当音频当前时间改变后,进度条也要改变
  195. onTimeupdate(res) {
  196. let audioId = this.audioId;
  197. this.audio.currentTime = res.target.currentTime;
  198. this.getCurTime(res.target.currentTime);
  199. this.playValue = (this.audio.currentTime / this.audio.maxTime) * 100;
  200. if (this.type == "audioLine") {
  201. if (!this.isClick && this.audio.currentTime * 1000 > this.ed) {
  202. this.$refs[audioId].pause();
  203. this.$emit("emptyEd");
  204. }
  205. } else if (this.audio.currentTime * 1000 > this.ed) {
  206. this.$refs[audioId].pause();
  207. }
  208. },
  209. onTimeupdateTime(res, playFlag) {
  210. if (!res) return;
  211. let audioId = this.audioId;
  212. this.$refs[audioId].currentTime = res;
  213. this.playValue = (res / this.audio.maxTime) * 100;
  214. if (playFlag) {
  215. let audio = document.getElementsByTagName("audio");
  216. audio.forEach(item => {
  217. if (item.id !== audioId) {
  218. item.pause();
  219. }
  220. });
  221. this.$refs[audioId].play();
  222. }
  223. },
  224. // 将整数转换成 时:分:秒的格式
  225. realFormatSecond(value) {
  226. let theTime = parseInt(value); // 秒
  227. let theTime1 = 0; // 分
  228. let theTime2 = 0; // 小时
  229. if (theTime > 60) {
  230. theTime1 = parseInt(theTime / 60);
  231. theTime = parseInt(theTime % 60);
  232. if (theTime1 > 60) {
  233. theTime2 = parseInt(theTime1 / 60);
  234. theTime1 = parseInt(theTime1 % 60);
  235. }
  236. }
  237. let result = String(parseInt(theTime));
  238. if (result < 10) {
  239. result = "0" + result;
  240. }
  241. if (theTime1 > 0) {
  242. result = String(parseInt(theTime1)) + ":" + result;
  243. if (theTime1 < 10) {
  244. result = "0" + result;
  245. }
  246. } else {
  247. result = "00:" + result;
  248. }
  249. if (theTime2 > 0) {
  250. result = String(parseInt(theTime2)) + ":" + result;
  251. if (theTime2 < 10) {
  252. result = "0" + result;
  253. }
  254. } else {
  255. // result = "00:" + result;
  256. }
  257. return result;
  258. },
  259. }
  260. };
  261. </script>
  262. <style lang="scss" scoped>
  263. .AudioFull {
  264. .audioLine {
  265. display: flex;
  266. align-items: center;
  267. width: 100%;
  268. height: 40px;
  269. background: #ffffff;
  270. box-sizing: border-box;
  271. border-radius: 4px;
  272. &-green {
  273. background: 0 0;
  274. }
  275. .play {
  276. margin-right: 12px;
  277. margin-left: 8px;
  278. width: 16px;
  279. min-width: 16px;
  280. height: 16px;
  281. cursor: pointer;
  282. display: block;
  283. }
  284. span {
  285. font-size: 16px;
  286. line-height: 19px;
  287. color: #000;
  288. margin-left: 8px;
  289. margin-right: 12px;
  290. font-weight: bold;
  291. font-size: 16px;
  292. line-height: 24px;
  293. text-align: right;
  294. &.color-white {
  295. color: #fff;
  296. }
  297. }
  298. }
  299. .audioLine2 {
  300. .play-icon {
  301. width: 16px;
  302. height: 16px;
  303. cursor: pointer;
  304. &.playBtn-icon {
  305. background: url("../../../assets/icon/pauseC-16-normal-red.png")
  306. no-repeat left top;
  307. background-size: 100% 100%;
  308. }
  309. &.pauseBtn-icon {
  310. background: url("../../../assets/NPC/compare-pause-red.png") no-repeat
  311. left top;
  312. background-size: 100% 100%;
  313. }
  314. }
  315. }
  316. .loadBtn {
  317. background: url("../../../assets/NPC/loading-red.png") no-repeat left top;
  318. background-size: 100% 100%;
  319. }
  320. .audioLine3 {
  321. width: 56px;
  322. height: 56px;
  323. background: #ffffff;
  324. border: 1px solid rgba(0, 0, 0, 0.1);
  325. border-radius: 40px;
  326. display: flex;
  327. justify-content: center;
  328. align-items: center;
  329. .play {
  330. width: 24px;
  331. height: 24px;
  332. cursor: pointer;
  333. &.playBtn {
  334. background: url("../../../assets/icon/pause-24-normal-red.png")
  335. no-repeat left top;
  336. background-size: 100% 100%;
  337. }
  338. &.pauseBtn {
  339. background: url("../../../assets/icon/play-24-normal-red.png") no-repeat
  340. left top;
  341. background-size: 100% 100%;
  342. }
  343. }
  344. &-green {
  345. background: rgba(255, 255, 255, 0.1);
  346. border: 1px solid rgba(0, 0, 0, 0.1);
  347. .play {
  348. &.playBtn {
  349. background: url("../../../assets/icon/pause-24-normal-yellow.png")
  350. no-repeat left top;
  351. background-size: 100% 100%;
  352. }
  353. &.pauseBtn {
  354. background: url("../../../assets/icon/play-24-normal-yellow.png")
  355. no-repeat left top;
  356. background-size: 100% 100%;
  357. }
  358. }
  359. }
  360. }
  361. }
  362. </style>
  363. <style lang="scss">
  364. .Audio {
  365. .el-slider__bar {
  366. height: 2px;
  367. background: #de4444;
  368. }
  369. .el-slider__button {
  370. background: #de4444;
  371. border: none;
  372. }
  373. .el-slider__button-wrapper {
  374. width: 25px;
  375. }
  376. .el-slider__button-wrapper {
  377. position: relative;
  378. z-index: 0;
  379. }
  380. .el-slider__button {
  381. width: 8px;
  382. height: 8px;
  383. top: 12px;
  384. position: absolute;
  385. }
  386. .el-slider__runway {
  387. margin: 0;
  388. padding: 0;
  389. background: #e5e5e5;
  390. border-radius: 0px;
  391. height: 2px;
  392. }
  393. .el-slider {
  394. position: relative;
  395. }
  396. }
  397. .NPC-Book-Sty {
  398. .Audio {
  399. .el-slider__bar {
  400. height: 2px;
  401. background: #de4444;
  402. }
  403. .el-slider__button {
  404. background: #de4444;
  405. border: none;
  406. }
  407. }
  408. }
  409. .NPC-Big-Book-preview-green {
  410. .Audio {
  411. .el-slider__bar {
  412. background: #24b99e !important;
  413. }
  414. .el-slider__button {
  415. background: #24b99e !important;
  416. }
  417. .audioLine2 {
  418. .play-icon {
  419. &.playBtn-icon {
  420. background: url("../../../assets/icon/pauseC-16-normal-Green.png")
  421. no-repeat left top;
  422. background-size: 100% 100%;
  423. }
  424. &.pauseBtn-icon {
  425. background: url("../../../assets/NPC/compare-pause-green.png")
  426. no-repeat left top;
  427. background-size: 100% 100%;
  428. }
  429. }
  430. }
  431. .loadBtn {
  432. background: url("../../../assets/NPC/loading-green.png") no-repeat left
  433. top;
  434. background-size: 100% 100%;
  435. }
  436. }
  437. }
  438. .NPC-Big-Book-preview-brown {
  439. .Audio {
  440. .el-slider__bar {
  441. background: #bd8865 !important;
  442. }
  443. .el-slider__button {
  444. background: #bd8865 !important;
  445. }
  446. .audioLine2 {
  447. .play-icon {
  448. &.playBtn-icon {
  449. background: url("../../../assets/icon/pauseC-16-normal-Brown.png")
  450. no-repeat left top;
  451. background-size: 100% 100%;
  452. }
  453. &.pauseBtn-icon {
  454. background: url("../../../assets/NPC/compare-pause-brown.png")
  455. no-repeat left top;
  456. background-size: 100% 100%;
  457. }
  458. }
  459. }
  460. .loadBtn {
  461. background: url("../../../assets/NPC/loading-brown.png") no-repeat left
  462. top;
  463. background-size: 100% 100%;
  464. }
  465. }
  466. }
  467. </style>