index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469
  1. <template>
  2. <!-- v-if="showAudioPop" -->
  3. <view class="container global-audio-box" v-if="showAudioPop">
  4. <view class="bg-overlay" @click="isShowMaskHandler"></view>
  5. <view class="audio-box">
  6. <view @click="showTabulation = true"> 最后不要忘了删除 </view>
  7. <view class="activity-title">
  8. {{ activityTitle }}
  9. <view class="icon-cross" @click.stop="isShowMaskHandler">
  10. <van-icon name="cross" font-size="32" />
  11. </view>
  12. </view>
  13. <view class="audio-card">
  14. <view class="card-title text_oneLine" @click="showTabulation = true">
  15. {{ title }}
  16. </view>
  17. <view class="slider-paly">
  18. <view style="flex: 1; padding-top: 20rpx">
  19. <slider
  20. activeColor="#376cbb"
  21. :max="audioTime"
  22. :value="curTime"
  23. @touchstart="touchstartHandler"
  24. @change="handleAudioSliderChange($event)"
  25. @changing="handleAudioSliderChangeing($event)"
  26. block-size="16"
  27. class="slider"
  28. />
  29. <view class="card-time">
  30. <text class="time">{{ curTime | formatVoiceTime }}</text>
  31. <text class="time">{{ audioTime | formatVoiceTime }}</text>
  32. </view>
  33. </view>
  34. <view class="is-paly-card">
  35. <image
  36. @click.stop="handleChangePlayStatus"
  37. :src="play ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon.gif' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/pause_icon.png'"
  38. ></image>
  39. </view>
  40. </view>
  41. <view class="fast-reverse">
  42. <view :style="{ color: PreviousNextSong == 0 ? '#f00' : '#333' }" @click="isPreviousNextSongHandler(PreviousNextSong == 0, '上')">上一首</view>
  43. <image @click="speedReverseHandler('reverse')" class="speed-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/fastReverse_icon.png"></image>
  44. <block v-for="(item, index) in timesTheSpeed" :key="item.value">
  45. <view class="speed-button" v-if="isTimes == item.value" @click="isTimesHandler(index)">
  46. {{ item.name }}
  47. </view>
  48. </block>
  49. <image @click="speedReverseHandler('speed')" class="speed-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/speed_icon.png"></image>
  50. <view :style="{ color: PreviousNextSong == playlistData.length - 1 ? '#f00' : '#333' }" @click="isPreviousNextSongHandler(PreviousNextSong == playlistData.length - 1, '下')">下一首</view>
  51. </view>
  52. </view>
  53. </view>
  54. <van-popup :show="showTabulation" closeable position="bottom" round custom-style="height: 50%;" @close="onCloseHandler">
  55. <view>
  56. <view class="global_title">播放列表</view>
  57. <view v-for="item in playlistData" :key="item.indexId" @click="palyHandler(item)">
  58. {{ item.Name }}
  59. </view>
  60. </view>
  61. </van-popup>
  62. </view>
  63. </template>
  64. <script>
  65. import { activity, Reports } from "@/config/api";
  66. export default {
  67. name: "",
  68. filters: {
  69. formatVoiceTime(e) {
  70. let m = parseInt(e / 60);
  71. let s = parseInt(e % 60);
  72. return `${m > 9 ? m : "0" + m}:${s > 9 ? s : "0" + s}`;
  73. },
  74. },
  75. components: {},
  76. props: {
  77. showAudioPop: {
  78. type: Boolean,
  79. default: false,
  80. required: true,
  81. },
  82. },
  83. data() {
  84. return {
  85. curTime: 0,
  86. audioTime: 0, //当前音频总时长
  87. title: "", //当前音频标题
  88. activityTitle: "", //当前活动标题
  89. play: false,
  90. isosName: "",
  91. palyTimeout: null,
  92. palyTime: 0,
  93. timesTheSpeed: [
  94. { name: "倍速", value: 1 },
  95. { name: "1.25倍", value: 1.25 },
  96. { name: "1.5倍", value: 1.5 },
  97. { name: "2倍", value: 2 },
  98. ],
  99. isRecord: true, //是否记录播放
  100. showTabulation: true,
  101. };
  102. },
  103. computed: {
  104. //重新
  105. audioInit() {
  106. return {
  107. activityId: this.$store.state.audioBg.activityId,
  108. reportId: this.$store.state.audioBg.reportId,
  109. indexId: this.$store.state.audioBg.indexId,
  110. };
  111. },
  112. // 几倍的播放速度
  113. isTimes() {
  114. return this.$store.state.audioBg.multiple;
  115. },
  116. //进度条是否在滑动
  117. isSlide() {
  118. return this.$store.state.audioBg.isDragSlide;
  119. },
  120. isEnded() {
  121. return this.$store.state.audioBg.isAudioEnded;
  122. },
  123. // 播放列表数据
  124. playlistData() {
  125. return this.$store.state.audioJoinPlaylist.playlist;
  126. },
  127. // 上、下一首歌曲禁用
  128. PreviousNextSong() {
  129. const curAudio = this.$store.state.audioBg.list;
  130. let indexId = this.$store.state.audioBg.indexId;
  131. let indexPlay = this.playlistData.findIndex((_) => _.Name === curAudio.Name && _.indexId === indexId);
  132. return indexPlay;
  133. },
  134. },
  135. watch: {
  136. audioInit: {
  137. // 切换了音频播放 重置下数据
  138. handler(nval) {
  139. this.init();
  140. },
  141. immediate: true,
  142. },
  143. },
  144. created() {},
  145. mounted() {
  146. uni.getSystemInfo({
  147. //判断机型
  148. success: (res) => {
  149. this.isosName = res.osName;
  150. },
  151. });
  152. },
  153. methods: {
  154. //点击隐藏事件
  155. isShowMaskHandler() {
  156. this.$emit("update:showAudioPop", false);
  157. },
  158. //数据初次加载
  159. init() {
  160. const curAudio = this.$store.state.audioBg.list;
  161. if ((this.globalBgAudioManager.src != curAudio.Url && curAudio.Url) || (this.isEnded && this.isosName !== "ios" && curAudio.Url)) {
  162. this.$store.commit("audioBg/setAudioEnd", false);
  163. this.globalBgAudioManager.playbackRate = 1;
  164. this.$store.commit("audioBg/setMultiple", 1);
  165. this.$store.commit("audioBg/updateAudioTime", 0);
  166. this.globalBgAudioManager.src = curAudio.Url;
  167. this.globalBgAudioManager.title = curAudio.Name;
  168. this.globalBgAudioManager.startTime = 0;
  169. this.curTime = 0;
  170. } else {
  171. this.curTime = parseInt(this.globalBgAudioManager.currentTime);
  172. }
  173. this.audioTime = curAudio.PlaySeconds;
  174. this.title = curAudio.Name ? curAudio.Name.replace(/<\/?font.*?>/g, "") : "";
  175. let activityTitle = this.$store.state.audioBg.activityTitle;
  176. this.activityTitle = activityTitle ? activityTitle.replace(/<\/?font.*?>/g, "") : "";
  177. this.play = !this.globalBgAudioManager.paused;
  178. this.listenAudio();
  179. },
  180. //音频播放事件
  181. listenAudio() {
  182. // 音频播放
  183. this.globalBgAudioManager.onPlay(async () => {
  184. if (this.isRecord) {
  185. console.log("音频播放");
  186. this.palyTime = 0;
  187. this.backAudioPlay();
  188. this.palyTimeout = setInterval(() => {
  189. this.palyTime++;
  190. }, 1000);
  191. }
  192. this.play = true;
  193. this.$store.commit("audioBg/updateAudioPause", false);
  194. this.isRecord = true;
  195. });
  196. // 音频暂停
  197. this.globalBgAudioManager.onPause(() => {
  198. console.log("音频暂停");
  199. this.backAudioPlay();
  200. clearInterval(this.palyTimeout);
  201. this.play = false;
  202. this.$store.commit("audioBg/updateAudioPause", true);
  203. });
  204. // 音频停止
  205. this.globalBgAudioManager.onStop(() => {
  206. console.log("音频停止");
  207. this.backAudioPlay();
  208. clearInterval(this.palyTimeout);
  209. this.$emit("update:showAudioPop", false);
  210. if (this.isosName == "ios") {
  211. this.play = false;
  212. this.$store.commit("audioBg/removeAudio");
  213. } else {
  214. this.play = false;
  215. this.$store.commit("audioBg/updateAudioPause", true);
  216. }
  217. });
  218. // 音频onEnded
  219. this.globalBgAudioManager.onEnded(() => {
  220. const curAudio = this.$store.state.audioBg.list;
  221. let indexId = this.$store.state.audioBg.indexId;
  222. this.onEndedpalyHandler(curAudio, indexId);
  223. console.log("音频onEnded");
  224. this.backAudioPlay();
  225. clearInterval(this.palyTimeout);
  226. });
  227. // 音频onError
  228. this.globalBgAudioManager.onError((e) => {
  229. console.log("音频onError", e);
  230. this.$store.commit("audioBg/removeAudio");
  231. this.$store.commit("audioBg/setMultiple", 1);
  232. uni.showToast({
  233. title: "音频播放错误",
  234. icon: "none",
  235. });
  236. });
  237. // 音频的播放时间更新
  238. this.globalBgAudioManager.onTimeUpdate(() => {
  239. if (this.globalBgAudioManager.src && parseInt(this.globalBgAudioManager.currentTime) !== 0 && !this.isSlide) {
  240. this.curTime = parseInt(this.globalBgAudioManager.currentTime);
  241. this.$store.commit("audioBg/updateAudioTime", this.curTime);
  242. }
  243. });
  244. },
  245. // 拖动进度条
  246. handleAudioSliderChangeing(e) {
  247. this.curTime = e.detail.value;
  248. },
  249. // 拖动进度条
  250. handleAudioSliderChange(e) {
  251. const value = e.detail.value;
  252. this.globalBgAudioManager.seek(value);
  253. this.isRecord = false;
  254. setTimeout(() => {
  255. this.$store.commit("audioBg/setSlide", false);
  256. }, 300);
  257. },
  258. // 音频点击暂停播放
  259. handleChangePlayStatus() {
  260. if (!this.globalBgAudioManager.paused) {
  261. this.globalBgAudioManager.pause();
  262. } else {
  263. this.globalBgAudioManager.play();
  264. }
  265. },
  266. // 倍速播放
  267. isTimesHandler(i) {
  268. let index = i == 3 ? 0 : i + 1;
  269. this.$store.commit("audioBg/setMultiple", this.timesTheSpeed[index].value);
  270. this.globalBgAudioManager.playbackRate = this.isTimes;
  271. this.globalBgAudioManager.startTime = this.curTime;
  272. if (this.globalBgAudioManager.paused) {
  273. this.globalBgAudioManager.play();
  274. }
  275. this.isRecord = false;
  276. },
  277. //快进 快退
  278. speedReverseHandler(type) {
  279. let isTime = type == "reverse" ? this.curTime - 15 : this.curTime + 15;
  280. isTime = isTime <= 0 ? 0 : isTime >= this.audioTime ? this.audioTime - 1 : isTime;
  281. this.globalBgAudioManager.seek(isTime);
  282. this.isRecord = false;
  283. },
  284. // 播放了记录
  285. backAudioPlay() {
  286. // let recordList = this.$store.state.audioBg.recordList;
  287. // if ((this.$store.state.audioBg.activityId || this.$store.state.audioBg.indexId) && this.palyTime >= 0) {
  288. // activity.backAudioPlay({
  289. // SourceId: recordList.SourceId || recordList.ActivityId,
  290. // SourceType: recordList.Type ? recordList.Type : 1,
  291. // PlaySeconds: this.palyTime,
  292. // PageRouter: this.$store.state.pageRouterReport,
  293. // });
  294. // } else if (this.$store.state.audioBg.reportId && this.palyTime >= 0) {
  295. // Reports.reportVoiceHistoryAdd({
  296. // ArticleId: this.$store.state.audioBg.reportId,
  297. // PlaySeconds: this.palyTime,
  298. // PageRouter: this.$store.state.pageRouterReport,
  299. // });
  300. // }
  301. },
  302. // 手指离开了拖动进度条
  303. touchstartHandler() {
  304. this.$store.commit("audioBg/setSlide", true);
  305. },
  306. // 关闭播放列表
  307. onCloseHandler() {
  308. this.showTabulation = false;
  309. },
  310. // 点击了播放列表
  311. palyHandler(item) {
  312. if (this.$store.state.audioBg.indexId == item.indexId) {
  313. if (this.globalBgAudioManager.paused) {
  314. this.globalBgAudioManager.play();
  315. } else {
  316. this.globalBgAudioManager.pause();
  317. }
  318. } else {
  319. this.playlistDataInit(item);
  320. }
  321. },
  322. // 播放结束后 播放下一首
  323. onEndedpalyHandler(curAudio, indexId) {
  324. let item = this.playlistData[this.PreviousNextSong + 1];
  325. if (item) {
  326. this.playlistDataInit(item);
  327. } else {
  328. this.$emit("update:showAudioPop", false);
  329. this.$store.commit("audioBg/setAudioEnd", true);
  330. this.$store.commit("audioBg/parseIntAudio", false);
  331. this.$store.commit("audioBg/removeAudio");
  332. }
  333. },
  334. // 上一首 下一首
  335. isPreviousNextSongHandler(isPlay, type) {
  336. if (isPlay) return;
  337. let item = this.playlistData[type == "上" ? this.PreviousNextSong - 1 : this.PreviousNextSong + 1];
  338. this.playlistDataInit(item);
  339. },
  340. // 处理播放列表的数据
  341. playlistDataInit(item) {
  342. if (item) {
  343. let VoiceList = {
  344. Url: item.Url,
  345. Name: item.Name,
  346. PlaySeconds: item.PlaySeconds,
  347. };
  348. this.$store.commit("audioBg/addAudio", { list: VoiceList, indexId: item.indexId, activityTitle: item.activityTitle, recordList: item.recordList });
  349. this.init();
  350. }
  351. },
  352. },
  353. };
  354. </script>
  355. <style scoped lang="scss">
  356. .global-audio-box {
  357. display: flex;
  358. height: 100%;
  359. position: fixed;
  360. width: 100%;
  361. top: 0;
  362. left: 0;
  363. z-index: 111;
  364. .bg-overlay {
  365. width: 100%;
  366. height: 100%;
  367. position: absolute;
  368. top: 0;
  369. left: 0;
  370. background-color: rgba(0, 0, 0, 0.7);
  371. }
  372. .activity-title {
  373. position: relative;
  374. width: 100%;
  375. font-size: 30rpx;
  376. font-weight: 500;
  377. margin-bottom: 35rpx;
  378. padding-right: 30rpx;
  379. .icon-cross {
  380. position: absolute;
  381. right: 0;
  382. top: 50%;
  383. transform: translateY(-50%);
  384. padding: 10rpx;
  385. }
  386. }
  387. .audio-box {
  388. position: absolute;
  389. bottom: 0;
  390. left: 0;
  391. padding: 30rpx;
  392. padding-bottom: constant(safe-area-inset-bottom);
  393. padding-bottom: env(safe-area-inset-bottom);
  394. width: 100%;
  395. background: #ffffff;
  396. box-sizing: border-box;
  397. border-radius: 30rpx 30rpx 0 0;
  398. }
  399. .audio-card {
  400. width: 100%;
  401. height: 282rpx;
  402. background: #f9f9f9;
  403. border-radius: 16rpx;
  404. margin: 0 auto;
  405. padding: 30rpx;
  406. .slider {
  407. width: 100%;
  408. margin: 0;
  409. }
  410. .slider-paly {
  411. display: flex;
  412. height: 80rpx;
  413. align-items: center;
  414. }
  415. .card-title {
  416. color: #376cbb;
  417. font-size: 28rpx;
  418. padding: 0 40rpx;
  419. text-align: center;
  420. margin-bottom: 35rpx;
  421. }
  422. .card-time {
  423. display: flex;
  424. justify-content: space-between;
  425. color: #999999;
  426. font-size: 20rpx;
  427. }
  428. .is-paly-card {
  429. width: 70rpx;
  430. height: 70rpx;
  431. flex-shrink: 0;
  432. margin-left: 30rpx;
  433. image {
  434. width: 70rpx;
  435. height: 70rpx;
  436. }
  437. }
  438. .fast-reverse {
  439. display: flex;
  440. align-items: center;
  441. justify-content: center;
  442. margin-top: 30rpx;
  443. .speed-button {
  444. width: 96rpx;
  445. height: 47rpx;
  446. background: #eaeaea;
  447. border-radius: 8rpx;
  448. text-align: center;
  449. line-height: 47rpx;
  450. margin: 0 70rpx;
  451. }
  452. .speed-img {
  453. width: 50rpx;
  454. height: 50rpx;
  455. }
  456. }
  457. }
  458. }
  459. </style>