@@ -353,4 +353,137 @@ | |||||
100% { | 100% { | ||||
transform: translate(-50%, -50%) rotateZ(360deg) | transform: translate(-50%, -50%) rotateZ(360deg) | ||||
} | } | ||||
} | |||||
} | |||||
.middles { | |||||
position: relative; | |||||
width: 420rpx; | |||||
height: 1020rpx; | |||||
.ms-close { | |||||
position: absolute; | |||||
bottom: 20rpx; | |||||
left: 20rpx; | |||||
width: 40rpx; | |||||
height: 40rpx; | |||||
image { | |||||
width: 40rpx; | |||||
height: 40rpx; | |||||
} | |||||
} | |||||
.audio-flex { | |||||
position: absolute; | |||||
top: 50%; | |||||
left: 65%; | |||||
transform: translate(-50%, -50%); | |||||
display: flex; | |||||
align-items: center; | |||||
.scroll-box { | |||||
width: 80rpx; | |||||
height: 800rpx; | |||||
display: flex; | |||||
justify-content: center; | |||||
.slider-container { | |||||
position: relative; | |||||
width: 5rpx; | |||||
height: 100%; | |||||
background: #C0C0C0; | |||||
border-radius: 10rpx; | |||||
.place-box { | |||||
width: 5rpx; | |||||
background: #2671E2; | |||||
} | |||||
.slider-btn { | |||||
position: absolute; | |||||
left: -15rpx; | |||||
width: 30rpx; | |||||
height: 30rpx; | |||||
border-radius: 50%; | |||||
box-shadow: 0 0 10rpx #999; | |||||
background: #fff; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.forwards { | |||||
position: absolute; | |||||
top: 50%; | |||||
left: 35%; | |||||
padding: 20rpx; | |||||
transform: translate(-50%, -50%) rotateZ(90deg); | |||||
width: 800rpx; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
.audio-control-wrapper { | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
.imt-audioss { | |||||
position: relative; | |||||
width: 100%; | |||||
height: 100%; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: space-between; | |||||
.forward-item { | |||||
display: flex; | |||||
align-items: center; | |||||
image { | |||||
width: 70rpx; | |||||
height: 70rpx; | |||||
} | |||||
&.top { | |||||
// margin: 0 60rpx; | |||||
} | |||||
} | |||||
.audio-wrapper { | |||||
padding: 0 0; | |||||
} | |||||
.audio-slider { | |||||
width: 100%; | |||||
} | |||||
.node-class { | |||||
width: 100%; | |||||
color: #333; | |||||
display: flex; | |||||
justify-content: center; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.playbackRate { | |||||
margin: 0 10rpx; | |||||
// padding: 0 10rpx; | |||||
width: 55rpx; | |||||
height: 55rpx; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
font-size: 24rpx; | |||||
&.act { | |||||
color: #2671E2; | |||||
border: 5rpx solid #2671E2; | |||||
border-radius: 50%; | |||||
} | |||||
} |
@@ -3,17 +3,6 @@ | |||||
<template v-if="theme == 'theme4'"> | <template v-if="theme == 'theme4'"> | ||||
<view class="imt-audios"> | <view class="imt-audios"> | ||||
<view class="top"> | |||||
<view class="audio-control-wrapper"> | |||||
<image :src="require('./static/loading.png')" v-if="loading" class="play loading"></image> | |||||
<template v-else> | |||||
<image :src="require('./static/playbtn.png')" alt="" @click="operate" class="play" | |||||
v-if="renderData('paused')"></image> | |||||
<image :src="require('./static/pausebtn.png')" alt="" @click="operate" class="play" v-else> | |||||
</image> | |||||
</template> | |||||
</view> | |||||
</view> | |||||
<view class="audio-wrapper"> | <view class="audio-wrapper"> | ||||
<view class="audio-flex"> | <view class="audio-flex"> | ||||
<text> | <text> | ||||
@@ -29,7 +18,45 @@ | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="forward"> | |||||
<view style="flex-grow: 1;display: flex;align-items: center;"> | |||||
<view class="forward-item"> | |||||
<!-- 块退15s --> | |||||
<image :src="require('./static/prev.png')" class="prevbtn" @click="stepPlay(-15)" | |||||
mode="widthFix"> | |||||
</image> | |||||
</view> | |||||
<view class="forward-item top audio-control-wrapper"> | |||||
<image :src="require('./static/loading.png')" v-if="loading" class="play loading"></image> | |||||
<template v-else> | |||||
<image :src="require('./static/pausebtn.png')" alt="" @click="operate" class="play" | |||||
v-if="renderData('paused')"></image> | |||||
<image :src="require('./static/playbtn.png')" alt="" @click="operate" class="play" v-else> | |||||
</image> | |||||
</template> | |||||
</view> | |||||
<view class="forward-item" style="margin-left: 0;"> | |||||
<!-- 快进15s --> | |||||
<image :src="require('./static/next.png')" class="nextbtn" @click="stepPlay(15)" | |||||
mode="widthFix"> | |||||
</image> | |||||
</view> | |||||
<view class="forward-item" style="margin-left: 0;"> | |||||
<block v-for="(data, index) in playbackRateArr" :key="index"> | |||||
<text class="playbackRate" @tap="checkPlaybackRate(data.name, index)" | |||||
:class="{act: playbackRateIndex == index}">x{{ data.name }}</text> | |||||
</block> | |||||
</view> | |||||
</view> | |||||
<view class="forward-item" style="flex-shrink: 0;"> | |||||
<image @tap="showMenu" :src="require('./static/quanping.png')" mode=""></image> | |||||
</view> | |||||
</view> | |||||
</template> | </template> | ||||
<template v-if="theme == 'theme3'"> | <template v-if="theme == 'theme3'"> | ||||
<slider class="audio-slider" :activeColor="themeColor" block-size="0" :value="renderData('current_value')" | <slider class="audio-slider" :activeColor="themeColor" block-size="0" :value="renderData('current_value')" | ||||
:max="renderData('duration_value')" @change="change" :disabled="!renderIsPlay"></slider> | :max="renderData('duration_value')" @change="change" :disabled="!renderIsPlay"></slider> | ||||
@@ -41,9 +68,9 @@ | |||||
<image :src="require('./static/loading.png')" v-if="loading" class="play loading"></image> | <image :src="require('./static/loading.png')" v-if="loading" class="play loading"></image> | ||||
<template v-else> | <template v-else> | ||||
<image :src="require('./static/playbtn.png')" alt="" @click="operate" class="play" | |||||
<image :src="require('./static/pausebtn.png')" alt="" @click="operate" class="play" | |||||
v-if="renderData('paused')"></image> | v-if="renderData('paused')"></image> | ||||
<image :src="require('./static/pausebtn.png')" alt="" @click="operate" class="play" v-else> | |||||
<image :src="require('./static/playbtn.png')" alt="" @click="operate" class="play" v-else> | |||||
</image> | </image> | ||||
</template> | </template> | ||||
</view> | </view> | ||||
@@ -69,9 +96,9 @@ | |||||
<view class="audio-control-wrapper" :style="{backgroundImage: `url(${renderData('coverImgUrl')})`}"> | <view class="audio-control-wrapper" :style="{backgroundImage: `url(${renderData('coverImgUrl')})`}"> | ||||
<image :src="require('./static/loading.png')" v-if="loading" class="play loading"></image> | <image :src="require('./static/loading.png')" v-if="loading" class="play loading"></image> | ||||
<template v-else> | <template v-else> | ||||
<image :src="require('./static/playbtn.png')" alt="" @click="operate" class="play" | |||||
<image :src="require('./static/pausebtn.png')" alt="" @click="operate" class="play" | |||||
v-if="renderData('paused')"></image> | v-if="renderData('paused')"></image> | ||||
<image :src="require('./static/pausebtn.png')" alt="" @click="operate" class="play" v-else> | |||||
<image :src="require('./static/playbtn.png')" alt="" @click="operate" class="play" v-else> | |||||
</image> | </image> | ||||
</template> | </template> | ||||
</view> | </view> | ||||
@@ -133,10 +160,79 @@ | |||||
</view> | </view> | ||||
</template> | </template> | ||||
<u-popup v-model="screenShow" mode="center" borderRadius="16"> | |||||
<view class="middles"> | |||||
<view class="audio-flex"> | |||||
<view class="scroll-box" @touchstart="touchS" @touchend="touchE"> | |||||
<view class="slider-container"> | |||||
<view class="place-box" :style="{height: `${boxHeight}%`}"></view> | |||||
<view class="slider-btn"></view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="forwards"> | |||||
<view class="imt-audioss"> | |||||
<view class="forward-item texts"> | |||||
<text> | |||||
{{renderData('current') || '00:00:00'}} | |||||
</text> | |||||
</view> | |||||
<view class="forward-item"> | |||||
<image :src="require('./static/prev.png')" class="prevbtn" @click="stepPlay(-15)" | |||||
mode="widthFix"> | |||||
</image> | |||||
</view> | |||||
<view class="forward-item top"> | |||||
<view class="audio-control-wrapper"> | |||||
<image :src="require('./static/loading.png')" v-if="loading" class="play loading"> | |||||
</image> | |||||
<template v-else> | |||||
<image :src="require('./static/pausebtn.png')" alt="" @click="operate" class="play" | |||||
v-if="renderData('paused')"></image> | |||||
<image :src="require('./static/playbtn.png')" alt="" @click="operate" class="play" | |||||
v-else> | |||||
</image> | |||||
</template> | |||||
</view> | |||||
</view> | |||||
<view class="forward-item"> | |||||
<image :src="require('./static/next.png')" class="nextbtn" @click="stepPlay(15)" | |||||
mode="widthFix"> | |||||
</image> | |||||
</view> | |||||
<view class="forward-item"> | |||||
<text v-if="!duration"> | |||||
{{renderData('duration') || '00:00:00'}} | |||||
</text> | |||||
<text v-else>{{ duration || '00:00:00' }}</text> | |||||
</view> | |||||
<view class="forward-item" style="margin-left: 0;"> | |||||
<block v-for="(data, index) in playbackRateArr" :key="index"> | |||||
<text class="playbackRate" @tap="checkPlaybackRate(data.name, index)" | |||||
:class="{act: playbackRateIndex == index}">x{{ data.name }}</text> | |||||
</block> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="forward-item ms-close" style="flex-shrink: 0;"> | |||||
<image @tap="screenShow = false" :src="require('./static/quxiaoquanping.png')" mode=""> | |||||
</image> | |||||
</view> | |||||
</view> | |||||
</u-popup> | |||||
</view> | </view> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import ZAudio from './index.js' | |||||
export default { | export default { | ||||
props: { | props: { | ||||
theme: { | theme: { | ||||
@@ -145,7 +241,7 @@ | |||||
}, | }, | ||||
themeColor: { | themeColor: { | ||||
type: String, | type: String, | ||||
default: '#42b983' | |||||
default: '#2671E2' | |||||
}, | }, | ||||
duration: { | duration: { | ||||
type: String, | type: String, | ||||
@@ -160,7 +256,33 @@ | |||||
renderIsPlay: this.$zaudio.renderIsPlay, | renderIsPlay: this.$zaudio.renderIsPlay, | ||||
audio: this.$zaudio.renderinfo, | audio: this.$zaudio.renderinfo, | ||||
loading: this.$zaudio.loading, | loading: this.$zaudio.loading, | ||||
action: Symbol('zaudio') | |||||
action: Symbol('zaudio'), | |||||
screenShow: false, // 记得改回来 | |||||
pageY: 0, // 滑块按钮位置 | |||||
boxHeight: 0, // 染色盒子背景色 | |||||
scrollBoxH: 1, // 容器高度 | |||||
nowInfo: {}, // 当前播放info | |||||
scrollObjS: {}, // 滚动对象 | |||||
playbackRateArr: [{ | |||||
name: 1, | |||||
}, | |||||
// { | |||||
// name: 1.25, | |||||
// }, | |||||
{ | |||||
name: 1.5, | |||||
}, | |||||
// { | |||||
// name: 1.75, | |||||
// }, | |||||
{ | |||||
name: 2, | |||||
}, | |||||
], // 倍速播放 | |||||
playbackRateIndex: 0, // 倍速播放下标 | |||||
}; | }; | ||||
}, | }, | ||||
computed: { | computed: { | ||||
@@ -178,7 +300,9 @@ | |||||
return this.playinfo[name]; | return this.playinfo[name]; | ||||
} | } | ||||
}; | }; | ||||
} | |||||
}, | |||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.$nextTick(() => { | this.$nextTick(() => { | ||||
@@ -199,10 +323,64 @@ | |||||
this.loading = loading; | this.loading = loading; | ||||
}); | }); | ||||
this.$zaudio.syncRender() | this.$zaudio.syncRender() | ||||
console.log(this.$zaudio) | |||||
this.playbackRateIndex = this.playbackRateArr.findIndex(item => { | |||||
return item.name == (uni.getBackgroundAudioManager().playbackRate || 1) | |||||
}) | |||||
}); | }); | ||||
}, | }, | ||||
methods: { | methods: { | ||||
// 切换倍速播放 | |||||
checkPlaybackRate(playbackRate, index) { | |||||
this.playbackRateIndex = index | |||||
this.$zaudio.stop() | |||||
uni.getBackgroundAudioManager().playbackRate = Number(playbackRate) | |||||
this.$emit('checkPlaybackRate') | |||||
}, | |||||
selectorQuery() { | |||||
const query = uni.createSelectorQuery().in(this); | |||||
query.select('.slider-container').boundingClientRect(data => { | |||||
console.log(data.height, 'scrollBoxH') | |||||
this.scrollBoxH = Math.floor(data.height) | |||||
}).exec(); | |||||
}, | |||||
touchS(e) { | |||||
console.log(e, 'touchS') | |||||
this.scrollObjS = Math.floor(e.changedTouches[0].clientY) | |||||
}, | |||||
touchE(e) { | |||||
console.log(e, 'touchE') | |||||
let endObj = Math.floor(e.changedTouches[0].clientY) | |||||
let percent = Math.floor(((endObj - this.scrollObjS) / this.scrollBoxH) * 100) | |||||
if ((this.boxHeight + percent) > 100) { | |||||
this.boxHeight = 100 | |||||
} else if ((this.boxHeight + percent) < 0) { | |||||
this.boxHeight = 0 | |||||
} else { | |||||
this.boxHeight += percent | |||||
} | |||||
let seek = Math.trunc((this.boxHeight / 100) * this.nowInfo.duration_value) | |||||
console.log(seek, 'seek') | |||||
this.$zaudio.seek(seek) | |||||
}, | |||||
showMenu() { | |||||
this.screenShow = true | |||||
this.$nextTick(() => { | |||||
this.selectorQuery() | |||||
console.log(this.renderData('current_value'), '123') | |||||
console.log(this.renderData('duration_value'), '321') | |||||
this.$zaudio.on('playing', '123', (obj) => { | |||||
this.nowInfo = obj | |||||
this.boxHeight = Math.trunc((Math.trunc(obj.current_value) / Math.trunc(obj | |||||
.duration_value)) * 100) | |||||
}) | |||||
}) | |||||
}, | |||||
// 转换时间 | // 转换时间 | ||||
formatSeconds(seconds) { | formatSeconds(seconds) { | ||||
var result = typeof seconds === "string" ? parseFloat(seconds) : seconds; | var result = typeof seconds === "string" ? parseFloat(seconds) : seconds; | ||||
@@ -218,7 +396,7 @@ | |||||
Math.floor(result % 60); | Math.floor(result % 60); | ||||
return `${h}:${m}:${s}`; | return `${h}:${m}:${s}`; | ||||
}, | }, | ||||
//播放or暂停 | //播放or暂停 | ||||
operate() { | operate() { | ||||
this.$zaudio.operate(); | this.$zaudio.operate(); | ||||
@@ -226,18 +404,19 @@ | |||||
//进度拖到 | //进度拖到 | ||||
change(event) { | change(event) { | ||||
if (this.renderIsPlay) { | if (this.renderIsPlay) { | ||||
console.log('组件内', event) | |||||
this.$zaudio.seek(Math.floor(event.detail.value)); | |||||
this.$zaudio.seek(event.detail.value); | |||||
} | } | ||||
}, | }, | ||||
//快进 | //快进 | ||||
stepPlay(value) { | stepPlay(value) { | ||||
if (this.renderData('current') == '00:00:00') return | |||||
console.log(this.renderData('current')) | |||||
this.$zaudio.stepPlay(value); | this.$zaudio.stepPlay(value); | ||||
}, | }, | ||||
//切歌 | //切歌 | ||||
changeplay(count) { | changeplay(count) { | ||||
this.$zaudio.changeplay(count); | this.$zaudio.changeplay(count); | ||||
}, | |||||
} | |||||
}, | }, | ||||
beforeDestroy() { | beforeDestroy() { | ||||
this.$zaudio.playinfo.duration = '00:00:00' | this.$zaudio.playinfo.duration = '00:00:00' | ||||
@@ -246,6 +425,7 @@ | |||||
let action = this.action; | let action = this.action; | ||||
this.$zaudio.syncStateOff(action) | this.$zaudio.syncStateOff(action) | ||||
this.$zaudio.stop() | this.$zaudio.stop() | ||||
this.$zaudio.off('playing', '123') | |||||
} | } | ||||
}; | }; | ||||
</script> | </script> | ||||
@@ -366,10 +546,9 @@ | |||||
} | } | ||||
.play { | .play { | ||||
width: 48rpx; | |||||
height: 48rpx; | |||||
width: 44rpx; | |||||
height: 44rpx; | |||||
z-index: 99; | z-index: 99; | ||||
background: rgba(0, 0, 0, 0.4); | |||||
border-radius: 50%; | border-radius: 50%; | ||||
position: absolute; | position: absolute; | ||||
top: 50%; | top: 50%; | ||||
@@ -384,8 +563,43 @@ | |||||
} | } | ||||
} | } | ||||
.forward { | |||||
padding: 0 20rpx 20rpx; | |||||
width: 100%; | |||||
display: flex; | |||||
align-items: flex-end; | |||||
.forward-item { | |||||
margin-right: 20rpx; | |||||
display: flex; | |||||
align-items: center; | |||||
.playbackRate { | |||||
margin: 0 10rpx; | |||||
// padding: 0 10rpx; | |||||
width: 55rpx; | |||||
height: 55rpx; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
font-size: 24rpx; | |||||
&.act { | |||||
color: #2671E2; | |||||
border: 5rpx solid #2671E2; | |||||
border-radius: 50%; | |||||
} | |||||
} | |||||
image { | |||||
width: 50rpx; | |||||
height: 50rpx; | |||||
} | |||||
} | |||||
} | |||||
.audio-flex { | .audio-flex { | ||||
padding: 0 32rpx 0 0; | |||||
padding: 0 16rpx 0 0; | |||||
flex-grow: 1; | flex-grow: 1; | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
@@ -1,5 +1,5 @@ | |||||
{ | { | ||||
"name" : "数智工牌", | |||||
"name" : "去房智控管家", | |||||
"appid" : "__UNI__7A1611D", | "appid" : "__UNI__7A1611D", | ||||
"description" : "去房智控管家", | "description" : "去房智控管家", | ||||
"versionName" : "1.1.0", | "versionName" : "1.1.0", | ||||
@@ -91,7 +91,7 @@ | |||||
}, | }, | ||||
"quickapp" : {}, | "quickapp" : {}, | ||||
"mp-weixin" : { | "mp-weixin" : { | ||||
"appid" : "wxe044603515ff2cb5", | |||||
"appid" : "wx8f883dca5ecc5510", | |||||
"setting" : { | "setting" : { | ||||
"urlCheck" : false, | "urlCheck" : false, | ||||
"es6" : true, | "es6" : true, | ||||
@@ -84,7 +84,7 @@ | |||||
<view class="bottombox"> | <view class="bottombox"> | ||||
<zaudio :duration="duration" theme="theme4"></zaudio> | |||||
<zaudio @checkPlaybackRate="checkPlaybackRate" :duration="duration" theme="theme4"></zaudio> | |||||
<!-- 底部弹框 --> | <!-- 底部弹框 --> | ||||
<view class="botbotmm"> | <view class="botbotmm"> | ||||
<view class="tmmchen" @click="guanjiancishifo()"> | <view class="tmmchen" @click="guanjiancishifo()"> | ||||
@@ -457,6 +457,9 @@ | |||||
duration: '', // 总时长 | duration: '', // 总时长 | ||||
info: null, // 播放时间 | info: null, // 播放时间 | ||||
isAudio: 0, // 第一时间定位播放 | isAudio: 0, // 第一时间定位播放 | ||||
nowPlaying: 0, // 当前播放位置 | |||||
stepPosition: 0, // 需要跳转的播放位置 | |||||
}; | }; | ||||
}, | }, | ||||
@@ -492,6 +495,7 @@ | |||||
}) | }) | ||||
this.$zaudio.on('playing', this.ACTION, (obj) => { | this.$zaudio.on('playing', this.ACTION, (obj) => { | ||||
this.duration = obj.duration | this.duration = obj.duration | ||||
this.nowPlaying = obj.current_value | |||||
this.TimeUpdate(this.TIMEEVENT(obj.current)) | this.TimeUpdate(this.TIMEEVENT(obj.current)) | ||||
}) | }) | ||||
this.$zaudio.on('error', this.ACTION, e => { | this.$zaudio.on('error', this.ACTION, e => { | ||||
@@ -1514,6 +1518,29 @@ | |||||
}, | }, | ||||
// 迅速切换音频源并切换回来 | |||||
checkPlaybackRate() { | |||||
this.stepPosition = this.nowPlaying | |||||
// | |||||
let data = [{ | |||||
src: 'https://static.quhouse.com/record/prop/2022-12-13/1670905992910-00066.mp3', | |||||
title: '录音音频', | |||||
singer: '', | |||||
coverImgUrl: '' | |||||
}] | |||||
this.$zaudio.setAudio(data) | |||||
//渲染第一首音频 | |||||
this.$zaudio.setRender(0) | |||||
if (!this.refresh) { | |||||
setTimeout(() => { | |||||
this.$zaudio.operate() | |||||
}, 150) | |||||
} | |||||
setTimeout(() => { | |||||
this.zyAudio() | |||||
}, 500) | |||||
}, | |||||
//录音实例 | //录音实例 | ||||
zyAudio() { | zyAudio() { | ||||
let data = [{ | let data = [{ | ||||
@@ -1531,6 +1558,13 @@ | |||||
this.isAudio = 0 | this.isAudio = 0 | ||||
}, 2000) | }, 2000) | ||||
} | } | ||||
if (this.stepPosition != 0) { | |||||
setTimeout(() => { | |||||
this.stepPlay(this.stepPosition) | |||||
}, 1500) | |||||
} | |||||
setTimeout(() => { | setTimeout(() => { | ||||
this.$zaudio.operate() | this.$zaudio.operate() | ||||
}, 150) | }, 150) | ||||
@@ -1595,7 +1629,7 @@ | |||||
.bottombox { | .bottombox { | ||||
width: 100%; | width: 100%; | ||||
height: 170rpx; | |||||
min-height: 170rpx; | |||||
border-top: 1px solid #E0E0E0; | border-top: 1px solid #E0E0E0; | ||||
.bottomhead { | .bottomhead { | ||||
@@ -145,7 +145,7 @@ | |||||
<view class="bottombox"> | <view class="bottombox"> | ||||
<!-- 播放块 --> | <!-- 播放块 --> | ||||
<template v-if="current == 1"> | <template v-if="current == 1"> | ||||
<zaudio :duration="duration" theme="theme4"></zaudio> | |||||
<zaudio @checkPlaybackRate="checkPlaybackRate" :duration="duration" theme="theme4"></zaudio> | |||||
</template> | </template> | ||||
<template v-if="userlistobj.invalidViolatedCause"> | <template v-if="userlistobj.invalidViolatedCause"> | ||||
@@ -266,6 +266,9 @@ | |||||
duration: '', // 总时长 | duration: '', // 总时长 | ||||
allTextList: [], // 所有话术列表 | allTextList: [], // 所有话术列表 | ||||
isFirstWords: 0, // 第一个违禁词出现的时间 | isFirstWords: 0, // 第一个违禁词出现的时间 | ||||
nowPlaying: 0, // 当前播放位置 | |||||
stepPosition: 0, // 需要跳转的播放位置 | |||||
} | } | ||||
}, | }, | ||||
computed: { | computed: { | ||||
@@ -297,6 +300,7 @@ | |||||
}) | }) | ||||
this.$zaudio.on('playing', this.ACTION, (obj) => { | this.$zaudio.on('playing', this.ACTION, (obj) => { | ||||
this.duration = obj.duration | this.duration = obj.duration | ||||
this.nowPlaying = obj.current_value | |||||
this.TimeUpdate(this.TIMEEVENT(obj.current)) | this.TimeUpdate(this.TIMEEVENT(obj.current)) | ||||
}) | }) | ||||
this.$zaudio.on('error', this.ACTION, e => { | this.$zaudio.on('error', this.ACTION, e => { | ||||
@@ -976,6 +980,30 @@ | |||||
}, | }, | ||||
// 迅速切换音频源并切换回来 | |||||
checkPlaybackRate() { | |||||
this.stepPosition = this.nowPlaying | |||||
// | |||||
let data = [{ | |||||
src: 'https://static.quhouse.com/record/prop/2022-12-13/1670905992910-00066.mp3', | |||||
title: '录音音频', | |||||
singer: '', | |||||
coverImgUrl: '' | |||||
}] | |||||
this.$zaudio.setAudio(data) | |||||
//渲染第一首音频 | |||||
this.$zaudio.setRender(0) | |||||
if (!this.refresh) { | |||||
setTimeout(() => { | |||||
this.$zaudio.operate() | |||||
}, 150) | |||||
} | |||||
setTimeout(() => { | |||||
this.zyAudio() | |||||
}, 500) | |||||
}, | |||||
//录音实例 | //录音实例 | ||||
zyAudio(times) { | zyAudio(times) { | ||||
let data = [{ | let data = [{ | ||||
@@ -999,6 +1027,14 @@ | |||||
this.$zaudio.operate() | this.$zaudio.operate() | ||||
}, 150) | }, 150) | ||||
} | } | ||||
if (this.stepPosition != 0) { | |||||
setTimeout(() => { | |||||
this.stepPlay(this.stepPosition) | |||||
}, 1500) | |||||
} | |||||
}, | }, | ||||
// 跳转指定位置播放 | // 跳转指定位置播放 | ||||
@@ -15,7 +15,7 @@ | |||||
:key="index">录音文件{{index+1}}</view> | :key="index">录音文件{{index+1}}</view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
<zaudio :duration="duration" theme="theme4"></zaudio> | |||||
<zaudio @checkPlaybackRate="checkPlaybackRate" :duration="duration" theme="theme4"></zaudio> | |||||
</view> | </view> | ||||
<scroll-view lower-threshold='20px' @scrolltolower="ltolower()" scroll-y="true" class="text scroll-Y" | <scroll-view lower-threshold='20px' @scrolltolower="ltolower()" scroll-y="true" class="text scroll-Y" | ||||
:scroll-top="scrollTop" :scroll-into-view="scrollId"> | :scroll-top="scrollTop" :scroll-into-view="scrollId"> | ||||
@@ -213,6 +213,8 @@ | |||||
isPageHide: false, // 是否息屏 | isPageHide: false, // 是否息屏 | ||||
duration: '', | duration: '', | ||||
nowPlaying: 0, // 当前播放位置 | |||||
stepPosition: 0, // 需要跳转的播放位置 | |||||
}; | }; | ||||
}, | }, | ||||
@@ -248,6 +250,7 @@ | |||||
}) | }) | ||||
this.$zaudio.on('playing', this.ACTION, (obj) => { | this.$zaudio.on('playing', this.ACTION, (obj) => { | ||||
this.duration = obj.duration | this.duration = obj.duration | ||||
this.nowPlaying = obj.current_value | |||||
this.TimeUpdate(this.TIMEEVENT(obj.current)) | this.TimeUpdate(this.TIMEEVENT(obj.current)) | ||||
}) | }) | ||||
this.$zaudio.on('ended', this.ACTION, e => { | this.$zaudio.on('ended', this.ACTION, e => { | ||||
@@ -681,6 +684,28 @@ | |||||
}) | }) | ||||
}) | }) | ||||
}, | }, | ||||
// 迅速切换音频源并切换回来 | |||||
checkPlaybackRate() { | |||||
this.stepPosition = this.nowPlaying | |||||
// | |||||
let data = [{ | |||||
src: 'https://static.quhouse.com/record/prop/2022-12-13/1670905992910-00066.mp3', | |||||
title: '录音音频', | |||||
singer: '', | |||||
coverImgUrl: '' | |||||
}] | |||||
this.$zaudio.setAudio(data) | |||||
//渲染第一首音频 | |||||
this.$zaudio.setRender(0) | |||||
if (!this.refresh) { | |||||
setTimeout(() => { | |||||
this.$zaudio.operate() | |||||
}, 150) | |||||
} | |||||
setTimeout(() => { | |||||
this.zyAudio() | |||||
}, 500) | |||||
}, | |||||
//录音实例 | //录音实例 | ||||
zyAudio() { | zyAudio() { | ||||
@@ -700,6 +725,13 @@ | |||||
this.stepPlay(parseInt(this.startTime / 1000)) | this.stepPlay(parseInt(this.startTime / 1000)) | ||||
}) | }) | ||||
} | } | ||||
if (this.stepPosition != 0) { | |||||
setTimeout(() => { | |||||
this.stepPlay(this.stepPosition) | |||||
}, 1500) | |||||
} | |||||
}, | }, | ||||
@@ -13,7 +13,7 @@ | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="call_record_time_one" >接待时长 {{alltimeStr}}</view> | <view class="call_record_time_one" >接待时长 {{alltimeStr}}</view> | ||||
<zaudio theme="theme4"></zaudio> | |||||
<zaudio @checkPlaybackRate="checkPlaybackRate" theme="theme4"></zaudio> | |||||
</view> | </view> | ||||
<scroll-view :scroll-top="scrollTop" lower-threshold='100px' @scrolltolower="ltolower()" | <scroll-view :scroll-top="scrollTop" lower-threshold='100px' @scrolltolower="ltolower()" | ||||
upper-threshold='40px' @scrolltoupper="rolltoupper()" | upper-threshold='40px' @scrolltoupper="rolltoupper()" | ||||
@@ -185,6 +185,9 @@ | |||||
ACTION: Symbol('zaudio'), // 唯一值区分每个页面的方法 | ACTION: Symbol('zaudio'), // 唯一值区分每个页面的方法 | ||||
isPageHide: false, // 是否息屏 | isPageHide: false, // 是否息屏 | ||||
duration: '', | duration: '', | ||||
nowPlaying: 0, // 当前播放位置 | |||||
stepPosition: 0, // 需要跳转的播放位置 | |||||
}; | }; | ||||
}, | }, | ||||
onLoad(options) { | onLoad(options) { | ||||
@@ -674,6 +677,28 @@ | |||||
}, | }, | ||||
// 迅速切换音频源并切换回来 | |||||
checkPlaybackRate() { | |||||
this.stepPosition = this.nowPlaying | |||||
// | |||||
let data = [{ | |||||
src: 'https://static.quhouse.com/record/prop/2022-12-13/1670905992910-00066.mp3', | |||||
title: '录音音频', | |||||
singer: '', | |||||
coverImgUrl: '' | |||||
}] | |||||
this.$zaudio.setAudio(data) | |||||
//渲染第一首音频 | |||||
this.$zaudio.setRender(0) | |||||
if (!this.refresh) { | |||||
setTimeout(() => { | |||||
this.$zaudio.operate() | |||||
}, 150) | |||||
} | |||||
setTimeout(() => { | |||||
this.zyAudio() | |||||
}, 500) | |||||
}, | |||||
//录音实例 | //录音实例 | ||||
zyAudio() { | zyAudio() { | ||||
let data = [ | let data = [ | ||||
@@ -687,6 +712,15 @@ | |||||
this.$zaudio.setAudio(data) | this.$zaudio.setAudio(data) | ||||
//渲染第一首音频 | //渲染第一首音频 | ||||
this.$zaudio.setRender(0) | this.$zaudio.setRender(0) | ||||
if (this.stepPosition != 0) { | |||||
setTimeout(() => { | |||||
this.stepPlay(this.stepPosition) | |||||
}, 1500) | |||||
} | |||||
}, | }, | ||||
@@ -26,7 +26,7 @@ | |||||
src="../../static/images/nopike.png" mode=""></image> | src="../../static/images/nopike.png" mode=""></image> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
<zaudio :duration="duration" theme="theme4"></zaudio> | |||||
<zaudio @checkPlaybackRate="checkPlaybackRate" :duration="duration" theme="theme4"></zaudio> | |||||
</view> | </view> | ||||
<scroll-view :scroll-top="scrollTop" lower-threshold='20px' @scrolltolower="ltolower()" | <scroll-view :scroll-top="scrollTop" lower-threshold='20px' @scrolltolower="ltolower()" | ||||
:scroll-into-view="scrollId" scroll-y="true" class="text scroll-Y"> | :scroll-into-view="scrollId" scroll-y="true" class="text scroll-Y"> | ||||
@@ -256,6 +256,9 @@ | |||||
isPageHide: false, // 是否息屏 | isPageHide: false, // 是否息屏 | ||||
duration: '', // 总时长 | duration: '', // 总时长 | ||||
eqLog:0, | eqLog:0, | ||||
nowPlaying: 0, // 当前播放位置 | |||||
stepPosition: 0, // 需要跳转的播放位置 | |||||
}; | }; | ||||
}, | }, | ||||
@@ -281,6 +284,7 @@ | |||||
}) | }) | ||||
this.$zaudio.on('playing', this.ACTION, (obj) => { | this.$zaudio.on('playing', this.ACTION, (obj) => { | ||||
console.log(obj, '12312321') | console.log(obj, '12312321') | ||||
this.nowPlaying = obj.current_value | |||||
this.TimeUpdate(this.TIMEEVENT(obj.current)) | this.TimeUpdate(this.TIMEEVENT(obj.current)) | ||||
}) | }) | ||||
this.$zaudio.on('ended', this.ACTION, e => { | this.$zaudio.on('ended', this.ACTION, e => { | ||||
@@ -1147,6 +1151,29 @@ | |||||
}) | }) | ||||
}, | }, | ||||
// 迅速切换音频源并切换回来 | |||||
checkPlaybackRate() { | |||||
this.stepPosition = this.nowPlaying | |||||
// | |||||
let data = [{ | |||||
src: 'https://static.quhouse.com/record/prop/2022-12-13/1670905992910-00066.mp3', | |||||
title: '录音音频', | |||||
singer: '', | |||||
coverImgUrl: '' | |||||
}] | |||||
this.$zaudio.setAudio(data) | |||||
//渲染第一首音频 | |||||
this.$zaudio.setRender(0) | |||||
if (!this.refresh) { | |||||
setTimeout(() => { | |||||
this.$zaudio.operate() | |||||
}, 150) | |||||
} | |||||
setTimeout(() => { | |||||
this.zyAudio() | |||||
}, 500) | |||||
}, | |||||
//录音实例 | //录音实例 | ||||
zyAudio() { | zyAudio() { | ||||
let data = this.luyinList.map((item, index) => { | let data = this.luyinList.map((item, index) => { | ||||
@@ -1160,6 +1187,13 @@ | |||||
this.$zaudio.setAudio(data) | this.$zaudio.setAudio(data) | ||||
//渲染第一首音频 | //渲染第一首音频 | ||||
this.$zaudio.setRender(0) | this.$zaudio.setRender(0) | ||||
if (this.stepPosition != 0) { | |||||
setTimeout(() => { | |||||
this.stepPlay(this.stepPosition) | |||||
}, 1500) | |||||
} | |||||
setTimeout(() => { | setTimeout(() => { | ||||
this.$zaudio.operate() | this.$zaudio.operate() | ||||
}, 150) | }, 150) | ||||
@@ -97,7 +97,7 @@ | |||||
</scroll-view> | </scroll-view> | ||||
<view class="bottombox" v-if="!refined"> | <view class="bottombox" v-if="!refined"> | ||||
<!-- 播放块 :src="recordPath" --> | <!-- 播放块 :src="recordPath" --> | ||||
<zaudio :duration="duration" theme="theme4"></zaudio> | |||||
<zaudio @checkPlaybackRate="checkPlaybackRate" :duration="duration" theme="theme4"></zaudio> | |||||
<!-- 底部弹框 --> | <!-- 底部弹框 --> | ||||
<view class="botbotmm"> | <view class="botbotmm"> | ||||
<view class="tmmchen" @click="guanjiancishifo()"> | <view class="tmmchen" @click="guanjiancishifo()"> | ||||
@@ -725,6 +725,10 @@ | |||||
templateList: [], // 销讲业务 | templateList: [], // 销讲业务 | ||||
showTemplate: false, // 展示选择销讲业务弹窗 | showTemplate: false, // 展示选择销讲业务弹窗 | ||||
templateName: '', // 销讲业务类型文字 | templateName: '', // 销讲业务类型文字 | ||||
nowPlaying: 0, // 当前播放位置 | |||||
stepPosition: 0, // 需要跳转的播放位置 | |||||
}; | }; | ||||
}, | }, | ||||
computed: { | computed: { | ||||
@@ -783,6 +787,7 @@ | |||||
}) | }) | ||||
this.$zaudio.on('playing', this.ACTION, (obj) => { | this.$zaudio.on('playing', this.ACTION, (obj) => { | ||||
this.duration = obj.duration | this.duration = obj.duration | ||||
this.nowPlaying = obj.current_value | |||||
this.TimeUpdate(this.TIMEEVENT(obj.current)) | this.TimeUpdate(this.TIMEEVENT(obj.current)) | ||||
}) | }) | ||||
this.$zaudio.on('error', this.ACTION, e => { | this.$zaudio.on('error', this.ACTION, e => { | ||||
@@ -2173,6 +2178,28 @@ | |||||
}) | }) | ||||
}, | }, | ||||
// 迅速切换音频源并切换回来 | |||||
checkPlaybackRate() { | |||||
this.stepPosition = this.nowPlaying | |||||
// | |||||
let data = [{ | |||||
src: 'https://static.quhouse.com/record/prop/2022-12-13/1670905992910-00066.mp3', | |||||
title: '录音音频', | |||||
singer: '', | |||||
coverImgUrl: '' | |||||
}] | |||||
this.$zaudio.setAudio(data) | |||||
//渲染第一首音频 | |||||
this.$zaudio.setRender(0) | |||||
if (!this.refresh) { | |||||
setTimeout(() => { | |||||
this.$zaudio.operate() | |||||
}, 150) | |||||
} | |||||
setTimeout(() => { | |||||
this.zyAudio() | |||||
}, 500) | |||||
}, | |||||
//录音实例 | //录音实例 | ||||
zyAudio() { | zyAudio() { | ||||
@@ -2186,9 +2213,16 @@ | |||||
//渲染第一首音频 | //渲染第一首音频 | ||||
this.$zaudio.setRender(0) | this.$zaudio.setRender(0) | ||||
if (this.stepPosition != 0) { | |||||
setTimeout(() => { | |||||
this.stepPlay(this.stepPosition) | |||||
}, 1500) | |||||
} | |||||
setTimeout(() => { | setTimeout(() => { | ||||
this.$zaudio.operate() | this.$zaudio.operate() | ||||
}, 150) | }, 150) | ||||
}, | }, | ||||
// 跳转指定位置播放 | // 跳转指定位置播放 | ||||
@@ -2250,7 +2284,7 @@ | |||||
.bottombox { | .bottombox { | ||||
width: 100%; | width: 100%; | ||||
height: 170rpx; | |||||
min-height: 170rpx; | |||||
border-top: 1px solid #E0E0E0; | border-top: 1px solid #E0E0E0; | ||||
/* iphonex 等安全区设置,底部安全区适配 */ | /* iphonex 等安全区设置,底部安全区适配 */ | ||||
padding-bottom: constant(safe-area-inset-bottom); | padding-bottom: constant(safe-area-inset-bottom); | ||||