334 lines
7.5 KiB
Vue
334 lines
7.5 KiB
Vue
<template>
|
|
<!-- 音频播放器组件 -->
|
|
<view v-if='url' class='flex audio'>
|
|
<view class='ml-3'>{{getTime(Math.round(currentTime))}}</view>
|
|
<view class='flex-1'>
|
|
<slider @change='changeAudio' @changing='changeing' :activeColor='activeColor' :min='0'
|
|
:max='duration ? duration.toFixed(0) : "00:00"' :value='currentTime != 0 ? currentTime.toFixed(0) : 0'
|
|
:step='0.1'></slider>
|
|
</view>
|
|
<view class='ml-3'>{{getTime(Math.round(totalDuration))}}</view>
|
|
<view class='mr-3' @click='start(audioId)'>
|
|
<image src='@/static/images/playicon.png' class='icon' v-show='!status'></image>
|
|
<image src='@/static/images/stopicon.png' class='icon' v-show='status'></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
context: null,
|
|
currentTime: 0,
|
|
duration: 100,
|
|
status: false,
|
|
totalDuration: 0,
|
|
bgAudioManager: null,
|
|
useBackgroundAudioManager: false,
|
|
flag: true,
|
|
// 是否只能播放一次
|
|
isPlay: false,
|
|
aid:'',
|
|
};
|
|
},
|
|
props: {
|
|
url: String,
|
|
activeColor: {
|
|
type: String,
|
|
default: '#0E7EFC'
|
|
},
|
|
audioId: [String, Number],
|
|
isChecked: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
watch: {
|
|
url(newValue, oldValue) {
|
|
this.url = newValue
|
|
if(newValue != oldValue){
|
|
console.log(123);
|
|
this.context.stop();
|
|
this.status = false
|
|
}
|
|
this.currentTime = 0
|
|
this.createAudio()
|
|
},
|
|
isChecked(newValue, oldValue) {
|
|
console.log(newValue);
|
|
console.log(oldValue);
|
|
if (newValue == false) {
|
|
this.isPlay = false
|
|
}
|
|
},
|
|
audioId(newValue, oldValue) {
|
|
console.log(newValue);
|
|
console.log(oldValue);
|
|
},
|
|
},
|
|
created() {
|
|
this.createAudio()
|
|
},
|
|
destroyed() {
|
|
this.context.stop();
|
|
},
|
|
methods: {
|
|
// 初始化
|
|
createAudio() {
|
|
this.bgAudioManager = uni.getBackgroundAudioManager();
|
|
this.context = uni.createInnerAudioContext();
|
|
console.log(this.url);
|
|
this.context.src = this.url;
|
|
this.context.sessionCategory = 'soloAmbient'
|
|
|
|
|
|
// uni.createInnerAudioContext事件听
|
|
this.onTimeUpdate();
|
|
this.onCanplay();
|
|
this.onEnded();
|
|
this.onErrorHandle();
|
|
|
|
// uni.getBackgroundAudioManager事件监听
|
|
this.onBgCanplay();
|
|
this.onBgTimeUpdate();
|
|
this.onBgEnded();
|
|
this.onBgStop();
|
|
|
|
uni.$on('stop', (id) => {
|
|
if(this.aid != id){
|
|
this.currentTime = 0
|
|
}
|
|
this.aid = id
|
|
if (id && id != this.audioId) {
|
|
this.context.stop();
|
|
this.status = false;
|
|
} else if (!id) {
|
|
this.context.stop();
|
|
this.status = false;
|
|
}
|
|
});
|
|
|
|
uni.$on('BackgroundAudioStop', (id) => {
|
|
if (id && id != this.audioId) {
|
|
this.bgAudioManager.stop();
|
|
this.status = false;
|
|
} else if (!id) {
|
|
this.bgAudioManager.stop();
|
|
this.status = false;
|
|
}
|
|
});
|
|
|
|
// uni.setInnerAudioOption({
|
|
// obeyMuteSwitch: false
|
|
// });
|
|
|
|
},
|
|
/**
|
|
* uni.getBackgroundAudioManager事件监听
|
|
*/
|
|
onBgCanplay() {
|
|
this.bgAudioManager.onCanplay(() => {
|
|
setTimeout(() => {
|
|
this.duration = this.bgAudioManager.duration;
|
|
this.totalDuration = this.bgAudioManager.duration;
|
|
console.log(this.duration, this.totalDuration);
|
|
}, 1000);
|
|
});
|
|
},
|
|
onBgTimeUpdate() {
|
|
this.bgAudioManager.onTimeUpdate(() => {
|
|
// 判定是否为无穷大，且动态赋值
|
|
if (!Number.isFinite(this.bgAudioManager.duration)) {
|
|
this.duration = this.bgAudioManager.currentTime + 10;
|
|
this.currentTime = this.bgAudioManager.currentTime;
|
|
} else {
|
|
this.duration = this.bgAudioManager.duration;
|
|
this.currentTime = this.bgAudioManager.currentTime;
|
|
}
|
|
});
|
|
},
|
|
// 自然播放结束
|
|
onBgEnded() {
|
|
this.bgAudioManager.onEnded(() => {
|
|
this.status = false;
|
|
this.currentTime = 0;
|
|
this.flag = true;
|
|
console.log('onBgEnded');
|
|
});
|
|
},
|
|
// 音频停止
|
|
onBgStop() {
|
|
console.log(1444);
|
|
this.bgAudioManager.onStop(() => {
|
|
this.status = false;
|
|
this.currentTime = 0;
|
|
this.flag = true;
|
|
console.log('onBgStop');
|
|
});
|
|
},
|
|
|
|
/**
|
|
* uni.createInnerAudioContext事件听
|
|
*/
|
|
start(id) { //点击播放
|
|
// 是否只能播放一次
|
|
if (this.isPlay == false) {
|
|
if (this.useBackgroundAudioManager) {
|
|
console.log(this.bgAudioManager.src);
|
|
if (this.flag) {
|
|
this.bgAudioManager.src = this.url;
|
|
this.flag = false;
|
|
}
|
|
this.duration = this.bgAudioManager.duration;
|
|
console.log(21222, this.duration);
|
|
if (this.status) {
|
|
this.bgAudioManager.pause();
|
|
this.status = !this.status;
|
|
} else {
|
|
// uni.$emit('BackgroundAudioStop',id);
|
|
this.bgAudioManager.play();
|
|
this.status = !this.status;
|
|
}
|
|
return;
|
|
}
|
|
if (this.status) {
|
|
this.context.pause();
|
|
this.status = !this.status;
|
|
} else {
|
|
uni.$emit('stop', id);
|
|
this.context.play();
|
|
this.status = !this.status;
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: "该音频只能播放一次",
|
|
duration: 2000,
|
|
icon: 'none'
|
|
});
|
|
}
|
|
|
|
},
|
|
onCanplay() { //进入可播放状态
|
|
this.context.onCanplay(() => {
|
|
this.context.duration;
|
|
setTimeout(() => {
|
|
this.duration = this.context.duration;
|
|
this.totalDuration = this.context.duration;
|
|
}, 1000);
|
|
});
|
|
},
|
|
onTimeUpdate() { //音频播放进度
|
|
this.context.onTimeUpdate(() => {
|
|
// console.log('onTimeUpdate');
|
|
// console.log(this.context.duration);
|
|
if (!Number.isFinite(this.context.duration)) {
|
|
this.duration = this.context.currentTime + 10;
|
|
this.currentTime = this.context.currentTime;
|
|
} else {
|
|
this.duration = this.context.duration;
|
|
this.currentTime = this.context.currentTime;
|
|
}
|
|
});
|
|
},
|
|
onEnded() { //播放结束
|
|
this.context.onEnded(() => {
|
|
this.status = false;
|
|
this.currentTime = 0;
|
|
console.log(233);
|
|
console.log(this.isChecked);
|
|
this.isPlay = this.isChecked
|
|
});
|
|
},
|
|
onErrorHandle() {
|
|
this.context.onError((res) => {
|
|
console.log(res.errMsg);
|
|
console.log(res.errCode);
|
|
this.useBackgroundAudioManager = true;
|
|
this.bgAudioManager.title = '报告回听';
|
|
console.log('bgAudioManager.duration', this.bgAudioManager.duration);
|
|
});
|
|
},
|
|
changeAudio(e) {
|
|
let paused = this.context.paused;
|
|
this.context.pause();
|
|
this.context.seek(e.detail.value)
|
|
if(!paused) {
|
|
this.context.play();
|
|
}
|
|
},
|
|
changeing(e) {
|
|
console.log(this.context);
|
|
this.currentTime = e.detail.value
|
|
// this.start()
|
|
},
|
|
getTime(time) {
|
|
let m = parseInt(time / 60);
|
|
let s = time % 60;
|
|
return this.towNum(m) + ':' + this.towNum(s);
|
|
},
|
|
towNum(num) {
|
|
if (num >= 10) {
|
|
return num;
|
|
} else {
|
|
return '0' + num;
|
|
}
|
|
},
|
|
// 销毁
|
|
destroy() {
|
|
this.bgAudioManager.stop();
|
|
this.context.stop();
|
|
this.context.destroy();
|
|
this.status = false;
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
/deep/uni-slider .uni-slider-handle {
|
|
width: 15px;
|
|
height: 15px;
|
|
margin-left: -8px;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
/deep/uni-slider .uni-slider-thumb {
|
|
width: 15px !important;
|
|
height: 15px !important;
|
|
margin-left: -8px !important;
|
|
margin-top: -8px !important;
|
|
}
|
|
|
|
.audio {
|
|
background: #f4f4f4;
|
|
padding: 20rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.icon {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: between;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.flex-1 {
|
|
flex: 1;
|
|
}
|
|
|
|
.mr-3 {
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.ml-3 {
|
|
color: #ccc;
|
|
}
|
|
</style>
|