<template>
<view class="global-voice-box">
<view v-if="!showBig">
<view class="flex small-box" @click.prevent="showBig=true">
<view style="flex:1;overflow: hidden;">
<view class="van-ellipsis">{{title}}</view>
<view class="time" style="font-size:24rpx;color:#666">时长 {{audioTime|formatVoiceTime}}</view>
</view>
<image
class="pause-img"
:src="play?require('@/static/audio-doing.png'):require('@/static/audio-pause-3.png')"
mode="aspectFill"
@click.stop="handleChangePlayStatus"
/>
<van-icon @click.stop="handleClosePopAudio" name="cross" size="18" color="#BBC3C9"/>
</view>
<van-progress
color="#D4AC78"
track-color="#fff"
:show-pivot="false"
stroke-width="2px"
custom-class="bot-progress"
:percentage="percentage"
/>
</view>
<view class="big-box" v-else>
<view class="flex top" style="overflow: hidden;">
<van-icon name="arrow-down" size="18" color="#BBC3C9" @click="showBig=false" />
<view class="van-ellipsis" style="flex:1;margin:0 10rpx;text-align:center">{{title}}</view>
<van-icon @click.stop="handleClosePopAudio" name="cross" size="18" color="#BBC3C9"/>
</view>
<view class="flex center">
<image
class="pause-img"
:src="play?require('@/static/audio-doing.png'):require('@/static/audio-pause-3.png')"
mode="aspectFill"
@click.stop="handleChangePlayStatus"
/>
<text class="time">{{curTime|formatVoiceTime}}</text>
<slider
activeColor="#e3b377"
:max="audioTime"
:value="curTime"
@change="handleAudioSliderChange($event)"
block-size="16"
class="slider"
/>
<text class="time">{{audioTime|formatVoiceTime}}</text>
</view>
</view>
</view>
</template>
<script>
import {apiViewLogUpdate} from '@/api/common'
export default {
filters:{
formatVoiceTime(e){
let m=parseInt(e/60)
let s=parseInt(e%60)
return `${m>9?m:'0'+m}:${s>9?s:'0'+s}`
}
},
computed: {
audioData(){
return this.$store.state.audio
},
//用户监听音频是否变化了 是否需要初始化
audioInit(){
return {
reportId:this.$store.state.audio.reportId,
voiceId:this.$store.state.audio.voiceId,
questionId:this.$store.state.audio.questionId
}
},
percentage(){
return parseInt((this.curTime/this.audioTime)*100)
},
reportAudioShow(){
return this.$store.state.report.audioData.show
}
},
watch:{
audioInit:{
handler(nval){
console.log(nval);
this.init()
},
immediate:true
},
showBig:{
handler(nval){
this.$store.commit('audio/showBig',nval)
},
immediate:true
}
},
data() {
return {
showBig:false,
curTime:0,
audioTime:0,//当前音频总时长
title:'',//当前音频标题
play:false
}
},
methods: {
init(){
console.log('audioBox init');
let delyTime=0
if(this.$store.state.report.audioData.show){
this.globalBgMusic.stop()
delyTime=300
}
console.log('audioBox init',delyTime);
const curAudio=this.$store.state.audio.list[this.$store.state.audio.index]
setTimeout(() => {
if(this.globalBgMusic.src!=curAudio.url){
this.handleUpdateAudioPlayTime()
this.globalBgMusic.src=curAudio.url
this.globalBgMusic.title=curAudio.title
}
this.audioTime=curAudio.time
this.title=curAudio.title
this.curTime=parseInt(this.globalBgMusic.currentTime)
this.play=!this.globalBgMusic.paused
this.listenAudio()
}, delyTime);
},
//音频播放事件
listenAudio(){
console.log('设置监听事件');
this.globalBgMusic.onPlay(()=>{
console.log('开始播放');
this.play=true
this.$store.commit('audio/updateAudioPause',false)
})
this.globalBgMusic.onPause(()=>{
console.log('音频暂停');
this.handleUpdateAudioPlayTime()
this.play=false
this.$store.commit('audio/updateAudioPause',true)
})
this.globalBgMusic.onStop(()=>{
console.log('音频停止');
this.handleUpdateAudioPlayTime()
this.$store.commit('audio/removeAudio')
})
this.globalBgMusic.onEnded(()=>{
console.log('音频onEnded');
this.handleUpdateAudioPlayTime()
const index=this.$store.state.audio.index
if(index==this.$store.state.audio.list.length-1){
this.$store.commit('audio/removeAudio')
}else{
this.handleAudioChange('next')
}
})
this.globalBgMusic.onError((e)=>{
console.log('音频onError',e);
this.$store.commit('audio/removeAudio')
uni.showToast({
title: '音频播放错误',
icon: 'none'
})
})
this.globalBgMusic.onTimeUpdate(()=>{
// console.log('时间更新');
this.curTime=parseInt(this.globalBgMusic.currentTime)
this.$store.commit('audio/updateAudioTime',this.curTime)
})
},
//关闭弹窗停止播放的音频
handleClosePopAudio(){
this.globalBgMusic.stop()
},
//音频切换（暂时没有用到因为都是一个音频 如果后期有多个 直接在页面dom调用此方法即可）
handleAudioChange(type){
let temIndex=this.$store.state.report.audioData.index
if(type=='before'){
if(temIndex>0){
let index=temIndex-1
this.$store.commit('audio/updateAudioIndex', index)
this.init()
}
}else{
if(temIndex<this.$store.state.report.audioData.list.length-1){
let index=temIndex+1
this.$store.commit('audio/updateAudioIndex', index)
this.init()
}
}
},
//拖动进度条
handleAudioSliderChange(e){
const value=e.detail.value
this.globalBgMusic.seek(value)
},
//音频点击暂停播放
handleChangePlayStatus(){
if(!this.globalBgMusic.paused){
this.globalBgMusic.pause()
}else{
this.globalBgMusic.play()
}
},
// 记录音频播放 时长
handleUpdateAudioPlayTime(){
if(!this.$store.state.audio.recordId||this.$store.state.audio.curTime==0) return
apiViewLogUpdate({
id:this.$store.state.audio.recordId,
stop_seconds:parseInt(this.$store.state.audio.curTime),
source:this.$store.state.audio.lastType
}).then(res=>{
console.log('音频播放时间记录成功');
})
}
},
}
</script>
<style>
.bot-progress{
width: 100%;
}
</style>
<style lang="scss" scoped>
.global-voice-box{
position: fixed;
background: #FFFFFF;
border: 1px solid #E4E4E4;
box-shadow: 0px 0px 40rpx rgba(50, 35, 17, 0.25);
left: 20rpx;
right: 20rpx;
bottom: calc(130rpx + constant(safe-area-inset-bottom));
bottom: calc(130rpx + env(safe-area-inset-bottom));
z-index: 99;
.small-box{
padding: 18rpx 48rpx 18rpx 20rpx;
position: relative;
align-items: center;
.pause-img{
width: 60rpx;
height: 60rpx;
margin-right: 44rpx;
margin-left: 30rpx;
flex-shrink: 0;
}
}
.big-box{
padding: 33rpx 30rpx;
.center{
align-items: center;
margin-top: 20rpx;
.time{
font-size: 24rpx;
}
.pause-img{
width: 60rpx;
height: 60rpx;
margin-right: 34rpx;
}
.slider{
flex: 1;
}
}
}
}
</style>