|
|
@@ -1,430 +0,0 @@ |
|
|
|
<template> |
|
|
|
<view class="imt-audio"> |
|
|
|
<template> |
|
|
|
<view class="top"> |
|
|
|
<view class="audio-control-wrapper"> |
|
|
|
<image :src="require('./static/loading.png')" v-if="playState=='loading'" class="play loading"> |
|
|
|
</image> |
|
|
|
<template v-else> |
|
|
|
<image :src="require('./static/playbtn.png')" alt="play" @click="play" class="play" |
|
|
|
v-if="playState=='pause'"></image> |
|
|
|
<image :src="require('./static/pausebtn.png')" alt="pause" @click="pause" class="play" v-else> |
|
|
|
</image> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="audio-wrapper"> |
|
|
|
<view class="audio-flex"> |
|
|
|
<text> |
|
|
|
{{formatSeconds(currentTime)}} |
|
|
|
</text> |
|
|
|
<slider class="audio-slider" block-size="12" :max="duration" :value="currentTime" |
|
|
|
@change="sliderChange" @changing="sliderChanging"></slider> |
|
|
|
<text> |
|
|
|
{{formatSeconds(duration)}} |
|
|
|
</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="slidebox" @click="showTip"> |
|
|
|
<slot name="extraCtrls"> |
|
|
|
<image class="slide-img" :src="require('./static/backimg.png')" mode=""></image> |
|
|
|
</slot> |
|
|
|
</view> |
|
|
|
<!-- 后台播放按钮区域 --> |
|
|
|
<view class="popup" v-if="show" :class="{close: closeing}" @click="checkPlayer"> |
|
|
|
<template v-if="!isBgPlay"> |
|
|
|
<image :src="require('./static/bg.png')" mode=""></image> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<image :src="require('./static/bg_act.png')" mode=""></image> |
|
|
|
</template> |
|
|
|
<text :class="{'act-test': isBgPlay}">后台播放</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!--video在ios中不能完全隐藏,否则无法播放--> |
|
|
|
<video id="videoPlayer" :autoplay="false" class="videoPlayer" :src="src" :muted="false" |
|
|
|
style="width: 10rpx;height:10rpx;" @play="playerOnPlay" @pause="playerOnPause" @ended="playerOnEnded" |
|
|
|
@timeupdate="playerOnTimeupdate" @waiting="playerOnWaiting" @error="playerOnError"></video> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
/* |
|
|
|
createInnerAudioContext()是audio组件的内部实现,不能熄屏播放、不能后台播放、不能倍速播放。 |
|
|
|
getBackgroundAudioManager() 可以熄屏播放、后台播放,不能倍速播放。缺点是响应速度很慢,无法实现精细、及时的进度控制,而且可能被别的程序占用。 |
|
|
|
因此这里只能用video来实现,video能倍速播放,不能熄屏播放、不能后台播放。而且避免了用createInnerAudioContext()实现的跳转到别的页面,还在播放的问题 |
|
|
|
因此应用程序可以在需要后台播放的时候(需要用户操作触发),再暂停这个控件的播放,然后自己用getBackgroundAudioManager实现后台播放 |
|
|
|
*/ |
|
|
|
|
|
|
|
import Vue from 'vue'; |
|
|
|
import { |
|
|
|
mapMutations |
|
|
|
} from 'vuex' |
|
|
|
import { |
|
|
|
audios |
|
|
|
} from './audioBg.js' |
|
|
|
export default { |
|
|
|
mixins: [audios], |
|
|
|
props: { |
|
|
|
nowFileTime: { |
|
|
|
type: [String, Number], |
|
|
|
default: 0 |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
watch: { |
|
|
|
nowFileTime(oValue, nValue) { |
|
|
|
this.duration = nValue |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
data() { |
|
|
|
return { |
|
|
|
src: '', // |
|
|
|
poster: "", |
|
|
|
name: "...", |
|
|
|
singer: "...", |
|
|
|
duration: 0, |
|
|
|
currentTime: 0, |
|
|
|
playState: "pause", //"loading"/"playing"/"pause" |
|
|
|
isSliderChanging: false, |
|
|
|
isFirst: false, // 是否阻止第一次赋值 |
|
|
|
show: false, // 控制展示用的 |
|
|
|
closeing: false, // 默认关闭 |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
// 自定义组件,需要传递第二个参数为this,否则后续的pause等操作不起作用 |
|
|
|
this.videoCtx = uni.createVideoContext("videoPlayer", this); |
|
|
|
this.createAudio() |
|
|
|
this.setAudioFunc() |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
|
|
|
|
if (this.isBgPlay) { |
|
|
|
this.backAudio() |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
...mapMutations(['createAudio', 'stopAduio']), |
|
|
|
setSrc(value) { |
|
|
|
console.log(this, ' 我打印this') |
|
|
|
this.src = value; |
|
|
|
}, |
|
|
|
|
|
|
|
setPoster(value) { |
|
|
|
this.poster = value; |
|
|
|
}, |
|
|
|
setName(value) { |
|
|
|
this.name = value; |
|
|
|
}, |
|
|
|
setSinger(value) { |
|
|
|
this.singer = value; |
|
|
|
}, |
|
|
|
|
|
|
|
playerOnPlay(e) { |
|
|
|
this.playState = "playing"; |
|
|
|
console.log('playerOnPlay', e) |
|
|
|
this.$emit("play"); |
|
|
|
}, |
|
|
|
playerOnPause(e) { |
|
|
|
this.playState = "pause"; |
|
|
|
console.log('playerOnPause', e) |
|
|
|
this.$emit("pause"); |
|
|
|
}, |
|
|
|
playerOnEnded(e) { |
|
|
|
this.playState = "pause"; |
|
|
|
console.log('playerOnEnded', e) |
|
|
|
this.$emit("ended"); |
|
|
|
}, |
|
|
|
|
|
|
|
playerOnTimeupdate(e) { |
|
|
|
if (this.isFirst) this.playState = "playing"; |
|
|
|
this.isFirst = true |
|
|
|
this.duration = e.detail.duration; |
|
|
|
this.currentTime = e.detail.currentTime; |
|
|
|
this.$emit("timeUpdate", e.detail); |
|
|
|
}, |
|
|
|
|
|
|
|
playerOnWaiting(e) { |
|
|
|
this.playState = "loading"; |
|
|
|
console.log('playerOnWaiting', e) |
|
|
|
}, |
|
|
|
playerOnError(e) { |
|
|
|
console.log('playerOnError', e) |
|
|
|
this.playState = "pause"; |
|
|
|
this.$emit("error", e); |
|
|
|
}, |
|
|
|
formatSeconds(seconds) { |
|
|
|
var result = typeof seconds === "string" ? parseFloat(seconds) : seconds; |
|
|
|
if (isNaN(result)) return ""; |
|
|
|
let h = Math.floor(result / 3600) < 10 ? |
|
|
|
"0" + Math.floor(result / 3600) : |
|
|
|
Math.floor(result / 3600); |
|
|
|
let m = Math.floor((result / 60) % 60) < 10 ? |
|
|
|
"0" + Math.floor((result / 60) % 60) : |
|
|
|
Math.floor((result / 60) % 60) + h * 60; |
|
|
|
let s = Math.floor(result % 60) < 10 ? |
|
|
|
"0" + Math.floor(result % 60) : |
|
|
|
Math.floor(result % 60); |
|
|
|
return `${h}:${m}:${s}`; |
|
|
|
}, |
|
|
|
stop() { |
|
|
|
this.videoCtx.stop(); |
|
|
|
}, |
|
|
|
seek(t) { |
|
|
|
this.videoCtx.seek(t); |
|
|
|
}, |
|
|
|
play() { |
|
|
|
// if (this.videoCtx.currentTime != this.videoCtx.currentTime) { |
|
|
|
// this.seek(this.currentTime) |
|
|
|
// } |
|
|
|
console.log('触发方法play') |
|
|
|
this.videoCtx.play(); //在有的H5浏览器里,如果play不是用户触发的,则play()会报错 |
|
|
|
// 暂停后台播放 |
|
|
|
this.stopAduio() |
|
|
|
}, |
|
|
|
pause() { |
|
|
|
console.log('触发方法pause') |
|
|
|
this.videoCtx.pause(); |
|
|
|
}, |
|
|
|
playbackRate(value) { |
|
|
|
this.videoCtx.playbackRate(value); |
|
|
|
//playbackRate不能在play之前或者之后立即调用,否则只有很少几率会成功 |
|
|
|
}, |
|
|
|
sliderChange(e) { |
|
|
|
this.isSliderChanging = false; |
|
|
|
//要通过e.detail.value获取,否则如果通过dom去读取slider的value |
|
|
|
//就会存在滚动条拖不动的情况 |
|
|
|
// this.videoCtx.seek(e.detail.value); |
|
|
|
let type = 'audio' |
|
|
|
|
|
|
|
if (this.bgAudioMannager.paused === false) { |
|
|
|
type = 'bgAudio' |
|
|
|
} |
|
|
|
this.$emit('sliderChangeComplate', { ...e, isType: type }) |
|
|
|
}, |
|
|
|
sliderChanging(e) { |
|
|
|
this.isSliderChanging = true; |
|
|
|
console.log(e, '当前正在改变') |
|
|
|
}, |
|
|
|
|
|
|
|
// 关闭后台播放按钮 |
|
|
|
closeTip() { |
|
|
|
this.closeing = false |
|
|
|
setTimeout(() => { |
|
|
|
this.show = false |
|
|
|
}, 250) |
|
|
|
}, |
|
|
|
|
|
|
|
// 展示后台播放按钮 |
|
|
|
showTip() { |
|
|
|
this.show = true |
|
|
|
setTimeout(() => { |
|
|
|
this.closeing = true |
|
|
|
}, 50) |
|
|
|
}, |
|
|
|
|
|
|
|
// 点击后台播放音频事件 |
|
|
|
backAudio() { |
|
|
|
this.pause() |
|
|
|
let obj = { |
|
|
|
src: this.src, |
|
|
|
currentTime: this.currentTime |
|
|
|
} |
|
|
|
this.setAudio(obj) |
|
|
|
}, |
|
|
|
|
|
|
|
// 切换播放源 |
|
|
|
checkPlayer() { |
|
|
|
this.closeTip() |
|
|
|
this.$u.debounce(() => { |
|
|
|
if (this.bgAudioMannager.paused === false) { |
|
|
|
this.$store.commit('setIsBgPlay', false) |
|
|
|
this.play() |
|
|
|
this.stopAduio() |
|
|
|
} else { |
|
|
|
this.$store.commit('setIsBgPlay', true) |
|
|
|
this.backAudio() |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
// @import './index.scss'; |
|
|
|
@mixin textoverflow() { |
|
|
|
display: -webkit-box; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes rowup { |
|
|
|
0% { |
|
|
|
-webkit-transform: translate(-50%, -50%) rotate(0deg); |
|
|
|
transform-origin: center center; |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
-webkit-transform: translate(-50%, -50%) rotate(360deg); |
|
|
|
transform-origin: center center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.imt-audio { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: 81rpx; |
|
|
|
display: flex; |
|
|
|
box-sizing: border-box; |
|
|
|
background: #fff; |
|
|
|
|
|
|
|
.top { |
|
|
|
position: relative; |
|
|
|
width: 100rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.audio-wrapper { |
|
|
|
position: relative; |
|
|
|
padding: 0 20rpx; |
|
|
|
display: flex; |
|
|
|
flex: 1; |
|
|
|
color: #fff; |
|
|
|
|
|
|
|
.popup { |
|
|
|
position: absolute; |
|
|
|
right: 32rpx; |
|
|
|
top: -122rpx; |
|
|
|
z-index: 100; |
|
|
|
width: 136rpx; |
|
|
|
height: 122rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
flex-direction: column; |
|
|
|
background: #fff; |
|
|
|
border: 1rpx solid #E0E0E0; |
|
|
|
transition: all 0.25s linear; |
|
|
|
opacity: 0; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 32rpx; |
|
|
|
height: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
text { |
|
|
|
margin-top: 10rpx; |
|
|
|
color: #333; |
|
|
|
font-size: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.act-test { |
|
|
|
color: #2671E2; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.close { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.slidebox { |
|
|
|
flex-shrink: 0; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.slide-img { |
|
|
|
width: 32rpx; |
|
|
|
height: 8rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .uni-slider-tap-area { |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .uni-slider-wrapper { |
|
|
|
min-height: 0; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .uni-slider-handle-wrapper { |
|
|
|
height: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
.audio-slider { |
|
|
|
flex-grow: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.play { |
|
|
|
width: 48rpx; |
|
|
|
height: 48rpx; |
|
|
|
z-index: 99; |
|
|
|
background: rgba(0, 0, 0, 0.4); |
|
|
|
border-radius: 50%; |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
|
|
|
&.loading { |
|
|
|
width: 48rpx; |
|
|
|
height: 48rpx; |
|
|
|
animation: rotating_theme3 2s linear infinite; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.audio-flex { |
|
|
|
padding: 0 32rpx 0 0; |
|
|
|
flex-grow: 1; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
text { |
|
|
|
color: #70798D; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes rotating { |
|
|
|
0% { |
|
|
|
transform: rotateZ(0deg) |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
transform: rotateZ(360deg) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes rotating_theme3 { |
|
|
|
0% { |
|
|
|
transform: translate(-50%, -50%) rotateZ(0deg) |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
transform: translate(-50%, -50%) rotateZ(360deg) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.hItem { |
|
|
|
margin-left: 16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.extrButton { |
|
|
|
font-size: 36rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.videoPlayer { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
z-index: -1; |
|
|
|
} |
|
|
|
</style> |