Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

yz-audio.vue 9.7 KiB

2 år sedan
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
  1. <template>
  2. <view class="imt-audio">
  3. <template>
  4. <view class="top">
  5. <view class="audio-control-wrapper">
  6. <image :src="require('./static/loading.png')" v-if="playState=='loading'" class="play loading">
  7. </image>
  8. <template v-else>
  9. <image :src="require('./static/playbtn.png')" alt="play" @click="play" class="play"
  10. v-if="playState=='pause'"></image>
  11. <image :src="require('./static/pausebtn.png')" alt="pause" @click="pause" class="play" v-else>
  12. </image>
  13. </template>
  14. </view>
  15. </view>
  16. <view class="audio-wrapper">
  17. <view class="audio-flex">
  18. <text>
  19. {{formatSeconds(currentTime)}}
  20. </text>
  21. <slider class="audio-slider" block-size="12" :max="duration" :value="currentTime"
  22. @change="sliderChange" @changing="sliderChanging"></slider>
  23. <text>
  24. {{formatSeconds(duration)}}
  25. </text>
  26. </view>
  27. <view class="slidebox" @click="showTip">
  28. <slot name="extraCtrls">
  29. <image class="slide-img" :src="require('./static/backimg.png')" mode=""></image>
  30. </slot>
  31. </view>
  32. <!-- 后台播放按钮区域 -->
  33. <view class="popup" v-if="show" :class="{close: closeing}" @click="checkPlayer">
  34. <template v-if="!isBgPlay">
  35. <image :src="require('./static/bg.png')" mode=""></image>
  36. </template>
  37. <template v-else>
  38. <image :src="require('./static/bg_act.png')" mode=""></image>
  39. </template>
  40. <text :class="{'act-test': isBgPlay}">后台播放</text>
  41. </view>
  42. </view>
  43. <!--video在ios中不能完全隐藏,否则无法播放-->
  44. <video id="videoPlayer" :autoplay="true" class="videoPlayer" :src="src" :muted="false"
  45. style="width: 10rpx;height:10rpx;" @play="playerOnPlay" @pause="playerOnPause" @ended="playerOnEnded"
  46. @timeupdate="playerOnTimeupdate" @waiting="playerOnWaiting" @error="playerOnError"></video>
  47. </template>
  48. </view>
  49. </template>
  50. <script>
  51. /*
  52. createInnerAudioContext()是audio组件的内部实现,不能熄屏播放、不能后台播放、不能倍速播放。
  53. getBackgroundAudioManager() 可以熄屏播放、后台播放,不能倍速播放。缺点是响应速度很慢,无法实现精细、及时的进度控制,而且可能被别的程序占用。
  54. 因此这里只能用video来实现,video能倍速播放,不能熄屏播放、不能后台播放。而且避免了用createInnerAudioContext()实现的跳转到别的页面,还在播放的问题
  55. 因此应用程序可以在需要后台播放的时候(需要用户操作触发),再暂停这个控件的播放,然后自己用getBackgroundAudioManager实现后台播放
  56. */
  57. import Vue from 'vue';
  58. import {
  59. mapMutations
  60. } from 'vuex'
  61. import {
  62. audios
  63. } from './audioBg.js'
  64. export default {
  65. mixins: [audios],
  66. props: {
  67. nowFileTime: {
  68. type: [String, Number],
  69. default: 0
  70. },
  71. },
  72. watch: {
  73. nowFileTime(oValue, nValue) {
  74. this.duration = nValue
  75. }
  76. },
  77. data() {
  78. return {
  79. src: '', //
  80. poster: "",
  81. name: "...",
  82. singer: "...",
  83. duration: 0,
  84. currentTime: 0,
  85. playState: "pause", //"loading"/"playing"/"pause"
  86. isSliderChanging: false,
  87. isFirst: false, // 是否阻止第一次赋值
  88. audio: null, // 音频对象
  89. show: false, // 控制展示用的
  90. closeing: false, // 默认关闭
  91. };
  92. },
  93. created() {
  94. // 自定义组件,需要传递第二个参数为this,否则后续的pause等操作不起作用
  95. this.videoCtx = uni.createVideoContext("videoPlayer", this);
  96. this.audio = uni.createInnerAudioContext();
  97. this.audio.autoplay = false;
  98. this.createAudio()
  99. this.setAudioFunc()
  100. },
  101. mounted() {
  102. this.audio.onCanplay((e) => {
  103. if (this.audio.duration != 0) {
  104. this.playState = "pause"
  105. this.$forceUpdate()
  106. }
  107. })
  108. },
  109. methods: {
  110. ...mapMutations(['createAudio', 'stopAduio']),
  111. setSrc(value) {
  112. console.log(this, ' 我打印this')
  113. this.src = value;
  114. console.log(this.src, '我在这儿里更换src')
  115. // 获取当前音频的总时长
  116. this.audio.src = value;
  117. },
  118. setPoster(value) {
  119. this.poster = value;
  120. },
  121. setName(value) {
  122. this.name = value;
  123. },
  124. setSinger(value) {
  125. this.singer = value;
  126. },
  127. playerOnPlay(e) {
  128. this.playState = "playing";
  129. console.log('playerOnPlay', e)
  130. this.$emit("play");
  131. },
  132. playerOnPause(e) {
  133. this.playState = "pause";
  134. console.log('playerOnPause', e)
  135. this.$emit("pause");
  136. },
  137. playerOnEnded(e) {
  138. this.playState = "pause";
  139. console.log('playerOnEnded', e)
  140. this.$emit("ended");
  141. },
  142. playerOnTimeupdate(e) {
  143. if (this.isFirst) this.playState = "playing";
  144. this.isFirst = true
  145. this.duration = e.detail.duration;
  146. this.currentTime = e.detail.currentTime;
  147. this.$emit("timeUpdate", e.detail);
  148. },
  149. playerOnWaiting(e) {
  150. this.playState = "loading";
  151. console.log('playerOnWaiting', e)
  152. },
  153. playerOnError(e) {
  154. console.log('playerOnError', e)
  155. this.playState = "pause";
  156. this.$emit("error", e);
  157. },
  158. formatSeconds(seconds) {
  159. var result = typeof seconds === "string" ? parseFloat(seconds) : seconds;
  160. if (isNaN(result)) return "";
  161. let h = Math.floor(result / 3600) < 10 ?
  162. "0" + Math.floor(result / 3600) :
  163. Math.floor(result / 3600);
  164. let m = Math.floor((result / 60) % 60) < 10 ?
  165. "0" + Math.floor((result / 60) % 60) :
  166. Math.floor((result / 60) % 60) + h * 60;
  167. let s = Math.floor(result % 60) < 10 ?
  168. "0" + Math.floor(result % 60) :
  169. Math.floor(result % 60);
  170. return `${h}:${m}:${s}`;
  171. },
  172. stop() {
  173. this.videoCtx.stop();
  174. },
  175. seek(t) {
  176. this.videoCtx.seek(t);
  177. },
  178. play() {
  179. // if (this.videoCtx.currentTime != this.videoCtx.currentTime) {
  180. // this.seek(this.currentTime)
  181. // }
  182. console.log('触发方法play')
  183. this.videoCtx.play(); //在有的H5浏览器里,如果play不是用户触发的,则play()会报错
  184. // 暂停后台播放
  185. this.stopAduio()
  186. },
  187. pause() {
  188. console.log('触发方法pause')
  189. this.videoCtx.pause();
  190. },
  191. playbackRate(value) {
  192. this.videoCtx.playbackRate(value);
  193. //playbackRate不能在play之前或者之后立即调用,否则只有很少几率会成功
  194. },
  195. sliderChange(e) {
  196. this.isSliderChanging = false;
  197. //要通过e.detail.value获取,否则如果通过dom去读取slider的value
  198. //就会存在滚动条拖不动的情况
  199. // this.videoCtx.seek(e.detail.value);
  200. let type = 'audio'
  201. if (this.bgAudioMannager.paused === false) {
  202. type = 'bgAudio'
  203. }
  204. this.$emit('sliderChangeComplate', { ...e, isType: type })
  205. },
  206. sliderChanging(e) {
  207. this.isSliderChanging = true;
  208. console.log(e, '当前正在改变')
  209. },
  210. // 关闭后台播放按钮
  211. closeTip() {
  212. this.closeing = false
  213. setTimeout(() => {
  214. this.show = false
  215. }, 250)
  216. },
  217. // 展示后台播放按钮
  218. showTip() {
  219. this.show = true
  220. setTimeout(() => {
  221. this.closeing = true
  222. }, 50)
  223. },
  224. // 点击后台播放音频事件
  225. backAudio() {
  226. this.pause()
  227. let obj = {
  228. src: this.src,
  229. currentTime: this.currentTime
  230. }
  231. this.setAudio(obj)
  232. },
  233. // 切换播放源
  234. checkPlayer() {
  235. this.closeTip()
  236. if (this.bgAudioMannager.paused === false) {
  237. this.stopAduio()
  238. } else {
  239. this.backAudio()
  240. }
  241. }
  242. },
  243. }
  244. </script>
  245. <style lang="scss">
  246. // @import './index.scss';
  247. @mixin textoverflow() {
  248. display: -webkit-box;
  249. overflow: hidden;
  250. text-overflow: ellipsis;
  251. -webkit-box-orient: vertical;
  252. -webkit-line-clamp: 1;
  253. }
  254. @keyframes rowup {
  255. 0% {
  256. -webkit-transform: translate(-50%, -50%) rotate(0deg);
  257. transform-origin: center center;
  258. }
  259. 100% {
  260. -webkit-transform: translate(-50%, -50%) rotate(360deg);
  261. transform-origin: center center;
  262. }
  263. }
  264. .imt-audio {
  265. position: relative;
  266. width: 100%;
  267. height: 81rpx;
  268. display: flex;
  269. box-sizing: border-box;
  270. background: #fff;
  271. .top {
  272. position: relative;
  273. width: 100rpx;
  274. }
  275. .audio-wrapper {
  276. position: relative;
  277. padding: 0 20rpx;
  278. display: flex;
  279. flex: 1;
  280. color: #fff;
  281. .popup {
  282. position: absolute;
  283. right: 32rpx;
  284. top: -122rpx;
  285. z-index: 100;
  286. width: 136rpx;
  287. height: 122rpx;
  288. display: flex;
  289. align-items: center;
  290. justify-content: center;
  291. flex-direction: column;
  292. background: #fff;
  293. border: 1rpx solid #E0E0E0;
  294. transition: all 0.25s linear;
  295. opacity: 0;
  296. image {
  297. width: 32rpx;
  298. height: 32rpx;
  299. }
  300. text {
  301. margin-top: 10rpx;
  302. color: #333;
  303. font-size: 24rpx;
  304. }
  305. .act-test {
  306. color: #2671E2;
  307. }
  308. }
  309. .close {
  310. opacity: 1;
  311. }
  312. }
  313. .slidebox {
  314. flex-shrink: 0;
  315. display: flex;
  316. align-items: center;
  317. .slide-img {
  318. width: 32rpx;
  319. height: 8rpx;
  320. }
  321. }
  322. /deep/ .uni-slider-tap-area {
  323. padding: 0;
  324. }
  325. /deep/ .uni-slider-wrapper {
  326. min-height: 0;
  327. }
  328. /deep/ .uni-slider-handle-wrapper {
  329. height: 6px;
  330. }
  331. .audio-slider {
  332. flex-grow: 1;
  333. }
  334. .play {
  335. width: 48rpx;
  336. height: 48rpx;
  337. z-index: 99;
  338. background: rgba(0, 0, 0, 0.4);
  339. border-radius: 50%;
  340. position: absolute;
  341. top: 50%;
  342. left: 50%;
  343. transform: translate(-50%, -50%);
  344. &.loading {
  345. width: 48rpx;
  346. height: 48rpx;
  347. animation: rotating_theme3 2s linear infinite;
  348. }
  349. }
  350. }
  351. .audio-flex {
  352. padding: 0 32rpx 0 0;
  353. flex-grow: 1;
  354. display: flex;
  355. align-items: center;
  356. text {
  357. color: #70798D;
  358. }
  359. }
  360. @keyframes rotating {
  361. 0% {
  362. transform: rotateZ(0deg)
  363. }
  364. 100% {
  365. transform: rotateZ(360deg)
  366. }
  367. }
  368. @keyframes rotating_theme3 {
  369. 0% {
  370. transform: translate(-50%, -50%) rotateZ(0deg)
  371. }
  372. 100% {
  373. transform: translate(-50%, -50%) rotateZ(360deg)
  374. }
  375. }
  376. .hItem {
  377. margin-left: 16rpx;
  378. }
  379. .extrButton {
  380. font-size: 36rpx;
  381. }
  382. .videoPlayer {
  383. position: absolute;
  384. left: 0;
  385. bottom: 0;
  386. z-index: -1;
  387. }
  388. </style>