index.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  1. <template>
  2. <view class="container global-audio-box" v-if="showAudioPop">
  3. <view class="bg-overlay" @click="isShowMaskHandler"></view>
  4. <view class="audio-box">
  5. <view class="activity-title">
  6. {{ activityTitle }}
  7. <view class="icon-cross" @click.stop="isShowMaskHandler">
  8. <van-icon name="cross" font-size="32" />
  9. </view>
  10. </view>
  11. <view class="audio-card">
  12. <view class="card-title text_oneLine">
  13. {{ title }}
  14. </view>
  15. <view class="slider-paly">
  16. <view style="flex: 1; padding-top: 20rpx">
  17. <slider activeColor="#3385FF" :max="audioTime" :value="curTime" @change="handleAudioSliderChange($event)" block-size="16" class="slider" />
  18. <view class="card-time">
  19. <text class="time">{{ curTime | formatVoiceTime }}</text>
  20. <text class="time">{{ audioTime | formatVoiceTime }}</text>
  21. </view>
  22. </view>
  23. <view class="is-paly-card">
  24. <image
  25. @click.stop="handleChangePlayStatus"
  26. :src="play ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon.gif' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/pause_icon.png'"
  27. ></image>
  28. </view>
  29. </view>
  30. <view class="fast-reverse">
  31. <image @click="speedReverseHandler('reverse')" class="speed-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/fastReverse_icon.png"></image>
  32. <block v-for="(item, index) in timesTheSpeed" :key="item.value">
  33. <view class="speed-button" v-if="isTimes == item.value" @click="isTimesHandler(index)">
  34. {{ item.name }}
  35. </view>
  36. </block>
  37. <image @click="speedReverseHandler('speed')" class="speed-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/speed_icon.png"></image>
  38. </view>
  39. </view>
  40. </view>
  41. </view>
  42. </template>
  43. <script>
  44. import { activity } from "@/config/api";
  45. export default {
  46. name: "",
  47. filters: {
  48. formatVoiceTime(e) {
  49. let m = parseInt(e / 60);
  50. let s = parseInt(e % 60);
  51. return `${m > 9 ? m : "0" + m}:${s > 9 ? s : "0" + s}`;
  52. },
  53. },
  54. components: {},
  55. props: {
  56. showAudioPop: {
  57. type: Boolean,
  58. default: false,
  59. required: true,
  60. },
  61. },
  62. data() {
  63. return {
  64. curTime: 0,
  65. audioTime: 0, //当前音频总时长
  66. title: "", //当前音频标题
  67. activityTitle: "", //当前活动标题
  68. play: false,
  69. isEnded: false,
  70. timesTheSpeed: [
  71. { name: "倍速", value: 1 },
  72. { name: "1.25倍", value: 1.25 },
  73. { name: "1.5倍", value: 1.5 },
  74. { name: "2倍", value: 2 },
  75. ],
  76. };
  77. },
  78. computed: {
  79. //重新
  80. audioInit() {
  81. return {
  82. activityId: this.$store.state.audioBg.activityId,
  83. reportId: this.$store.state.audioBg.reportId,
  84. };
  85. },
  86. // 几倍的播放速度
  87. isTimes() {
  88. return this.$store.state.audioBg.multiple;
  89. },
  90. },
  91. watch: {
  92. audioInit: {
  93. handler(nval) {
  94. this.init();
  95. },
  96. immediate: true,
  97. },
  98. },
  99. created() {},
  100. mounted() {},
  101. methods: {
  102. //点击隐藏事件
  103. isShowMaskHandler() {
  104. this.$emit("update:showAudioPop", false);
  105. },
  106. //数据初次加载
  107. init() {
  108. const curAudio = this.$store.state.audioBg.list;
  109. if (this.globalBgAudioManager.src != curAudio.Url && curAudio.Url) {
  110. this.$store.commit("audioBg/setMultiple", 1);
  111. this.$store.commit("audioBg/updateAudioTime", 0);
  112. this.globalBgInit();
  113. this.globalBgAudioManager.startTime = 0;
  114. this.globalBgAudioManager.playbackRate = this.isTimes;
  115. this.curTime = 0;
  116. } else {
  117. this.curTime = parseInt(this.globalBgAudioManager.currentTime);
  118. }
  119. this.audioTime = curAudio.PlaySeconds;
  120. this.title = curAudio.Name;
  121. this.activityTitle = this.$store.state.audioBg.activityTitle;
  122. this.play = !this.globalBgAudioManager.paused;
  123. this.listenAudio();
  124. },
  125. //播放不同的,或者播放结束了
  126. globalBgInit(type) {
  127. const curAudio = this.$store.state.audioBg.list;
  128. this.globalBgAudioManager.src = curAudio.Url;
  129. this.globalBgAudioManager.title = curAudio.Name;
  130. if (type == "onEnded") {
  131. this.play = false;
  132. this.globalBgAudioManager.pause();
  133. this.$store.commit("audioBg/updateAudioPause", true);
  134. }
  135. },
  136. //音频播放事件
  137. listenAudio() {
  138. this.globalBgAudioManager.onPlay(async () => {
  139. console.log("音频播放");
  140. this.play = true;
  141. this.$store.commit("audioBg/updateAudioPause", false);
  142. if (this.$store.state.audioBg.activityId) {
  143. activity.backAudioPlay({ ActivityId: this.$store.state.audioBg.activityId });
  144. }
  145. });
  146. this.globalBgAudioManager.onPause(() => {
  147. console.log("音频暂停");
  148. this.play = false;
  149. this.$store.commit("audioBg/updateAudioPause", true);
  150. });
  151. this.globalBgAudioManager.onStop(() => {
  152. console.log("音频停止");
  153. this.$emit("update:showAudioPop", false);
  154. uni.getSystemInfo({
  155. success: (res) => {
  156. if (res.osName == "ios") {
  157. this.play = false;
  158. this.$store.commit("audioBg/removeAudio");
  159. } else {
  160. this.play = false;
  161. this.$store.commit("audioBg/updateAudioPause", true);
  162. }
  163. },
  164. });
  165. });
  166. this.globalBgAudioManager.onEnded(() => {
  167. console.log("音频onEnded");
  168. // this.$store.commit("audioBg/updateAudioTime", 0);
  169. this.curTime = 0;
  170. uni.getSystemInfo({
  171. success: (res) => {
  172. if (res.osName == "ios") {
  173. this.globalBgInit("onEnded");
  174. } else {
  175. this.play = false;
  176. this.globalBgAudioManager.pause();
  177. this.$store.commit("audioBg/updateAudioPause", true);
  178. }
  179. },
  180. });
  181. });
  182. this.globalBgAudioManager.onError((e) => {
  183. console.log("音频onError", e);
  184. this.$store.commit("audioBg/removeAudio");
  185. this.$store.commit("audioBg/setMultiple", 1);
  186. uni.showToast({
  187. title: "音频播放错误",
  188. icon: "none",
  189. });
  190. });
  191. //音频的播放时间更新
  192. this.globalBgAudioManager.onTimeUpdate(() => {
  193. if (this.globalBgAudioManager.src && parseInt(this.globalBgAudioManager.currentTime) !== 0) {
  194. this.curTime = parseInt(this.globalBgAudioManager.currentTime);
  195. this.$store.commit("audioBg/updateAudioTime", this.curTime);
  196. }
  197. });
  198. },
  199. //拖动进度条
  200. handleAudioSliderChange(e) {
  201. const value = e.detail.value;
  202. this.globalBgAudioManager.seek(value);
  203. },
  204. //音频点击暂停播放
  205. handleChangePlayStatus() {
  206. if (!this.globalBgAudioManager.paused) {
  207. this.globalBgAudioManager.pause();
  208. } else {
  209. this.globalBgAudioManager.play();
  210. }
  211. },
  212. //倍速播放
  213. isTimesHandler(i) {
  214. console.log(this.curTime);
  215. let index = i == 3 ? 0 : i + 1;
  216. this.$store.commit("audioBg/setMultiple", this.timesTheSpeed[index].value);
  217. this.globalBgAudioManager.playbackRate = this.isTimes;
  218. this.globalBgAudioManager.startTime = this.curTime;
  219. if (this.globalBgAudioManager.paused) {
  220. this.globalBgAudioManager.play();
  221. }
  222. },
  223. //快进 快退
  224. speedReverseHandler(type) {
  225. let isTime = type == "reverse" ? this.curTime - 15 : this.curTime + 15;
  226. isTime = isTime <= 0 ? 0 : isTime >= this.audioTime ? this.audioTime : isTime;
  227. this.globalBgAudioManager.seek(isTime);
  228. },
  229. },
  230. };
  231. </script>
  232. <style scoped lang="scss">
  233. .global-audio-box {
  234. display: flex;
  235. height: 100%;
  236. position: fixed;
  237. width: 100%;
  238. top: 0;
  239. left: 0;
  240. z-index: 11;
  241. .bg-overlay {
  242. width: 100%;
  243. height: 100%;
  244. position: absolute;
  245. top: 0;
  246. left: 0;
  247. background-color: rgba(0, 0, 0, 0.7);
  248. }
  249. .activity-title {
  250. position: relative;
  251. width: 100%;
  252. font-size: 30rpx;
  253. font-weight: 500;
  254. margin-bottom: 35rpx;
  255. padding-right: 30rpx;
  256. .icon-cross {
  257. position: absolute;
  258. right: 0;
  259. top: 50%;
  260. transform: translateY(-50%);
  261. padding: 10rpx;
  262. }
  263. }
  264. .audio-box {
  265. position: absolute;
  266. bottom: 0;
  267. left: 0;
  268. padding: 30rpx;
  269. padding-bottom: constant(safe-area-inset-bottom);
  270. padding-bottom: env(safe-area-inset-bottom);
  271. width: 100%;
  272. background: #ffffff;
  273. box-sizing: border-box;
  274. border-radius: 30rpx 30rpx 0 0;
  275. }
  276. .audio-card {
  277. width: 100%;
  278. height: 282rpx;
  279. background: #f9f9f9;
  280. border-radius: 16rpx;
  281. margin: 0 auto;
  282. padding: 30rpx;
  283. .slider {
  284. width: 100%;
  285. margin: 0;
  286. }
  287. .slider-paly {
  288. display: flex;
  289. height: 80rpx;
  290. align-items: center;
  291. }
  292. .card-title {
  293. color: #3385ff;
  294. font-size: 28rpx;
  295. padding: 0 40rpx;
  296. text-align: center;
  297. margin-bottom: 35rpx;
  298. }
  299. .card-time {
  300. display: flex;
  301. justify-content: space-between;
  302. color: #999999;
  303. font-size: 20rpx;
  304. }
  305. .is-paly-card {
  306. width: 70rpx;
  307. height: 70rpx;
  308. flex-shrink: 0;
  309. margin-left: 30rpx;
  310. image {
  311. width: 70rpx;
  312. height: 70rpx;
  313. }
  314. }
  315. .fast-reverse {
  316. display: flex;
  317. align-items: center;
  318. justify-content: center;
  319. margin-top: 30rpx;
  320. .speed-button {
  321. width: 96rpx;
  322. height: 47rpx;
  323. background: #eaeaea;
  324. border-radius: 8rpx;
  325. text-align: center;
  326. line-height: 47rpx;
  327. margin: 0 70rpx;
  328. }
  329. .speed-img {
  330. width: 50rpx;
  331. height: 50rpx;
  332. }
  333. }
  334. }
  335. }
  336. </style>