liumin
/
NewZkgj
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

播放器修改

branch0222
douzhuo 2 years ago
parent
0bb0fb850e
commit
20adfe10f7
15 changed files with 589 additions and 38 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +134
    -1
      components/uniapp-zaudio/index.scss
  2. BIN
      components/uniapp-zaudio/static/kuaijin.png
  3. BIN
      components/uniapp-zaudio/static/kuaitui.png
  4. BIN
      components/uniapp-zaudio/static/pausebtn.png
  5. BIN
      components/uniapp-zaudio/static/playbtn.png
  6. BIN
      components/uniapp-zaudio/static/quanping.png
  7. BIN
      components/uniapp-zaudio/static/quxiaoquanping.png
  8. +241
    -27
      components/uniapp-zaudio/zaudio.vue
  9. +2
    -2
      manifest.json
  10. +36
    -2
      pages/center/Piabodata/Customerportrait/Receivedetailabout.vue
  11. +37
    -1
      pages/center/prohibited/details.vue
  12. +33
    -1
      pages/learning/Equinoctial/index.vue
  13. +35
    -1
      pages/learning/Thefulltext/index2.vue
  14. +35
    -1
      pages/mine/details.vue
  15. +36
    -2
      pages/mine/details2.vue

+ 134
- 1
components/uniapp-zaudio/index.scss View File

@@ -353,4 +353,137 @@
100% {
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%;
}
}

BIN
components/uniapp-zaudio/static/kuaijin.png View File

Before After
Width: 128  |  Height: 128  |  Size: 2.9 KiB

BIN
components/uniapp-zaudio/static/kuaitui.png View File

Before After
Width: 128  |  Height: 128  |  Size: 2.9 KiB

BIN
components/uniapp-zaudio/static/pausebtn.png View File

Before After
Width: 130  |  Height: 123  |  Size: 189 B Width: 44  |  Height: 44  |  Size: 802 B

BIN
components/uniapp-zaudio/static/playbtn.png View File

Before After
Width: 130  |  Height: 130  |  Size: 274 B Width: 44  |  Height: 44  |  Size: 756 B

BIN
components/uniapp-zaudio/static/quanping.png View File

Before After
Width: 128  |  Height: 128  |  Size: 2.3 KiB

BIN
components/uniapp-zaudio/static/quxiaoquanping.png View File

Before After
Width: 128  |  Height: 128  |  Size: 2.3 KiB

+ 241
- 27
components/uniapp-zaudio/zaudio.vue View File

@@ -3,17 +3,6 @@

<template v-if="theme == 'theme4'">
<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-flex">
<text>
@@ -29,7 +18,45 @@
</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 v-if="theme == 'theme3'">
<slider class="audio-slider" :activeColor="themeColor" block-size="0" :value="renderData('current_value')"
: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>
<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>
<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>
</template>
</view>
@@ -69,9 +96,9 @@
<view class="audio-control-wrapper" :style="{backgroundImage: `url(${renderData('coverImgUrl')})`}">
<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"
<image :src="require('./static/pausebtn.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 :src="require('./static/playbtn.png')" alt="" @click="operate" class="play" v-else>
</image>
</template>
</view>
@@ -133,10 +160,79 @@
</view>
</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>
</template>

<script>
import ZAudio from './index.js'
export default {
props: {
theme: {
@@ -145,7 +241,7 @@
},
themeColor: {
type: String,
default: '#42b983'
default: '#2671E2'
},
duration: {
type: String,
@@ -160,7 +256,33 @@
renderIsPlay: this.$zaudio.renderIsPlay,
audio: this.$zaudio.renderinfo,
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: {
@@ -178,7 +300,9 @@
return this.playinfo[name];
}
};
}
},


},
mounted() {
this.$nextTick(() => {
@@ -199,10 +323,64 @@
this.loading = loading;
});
this.$zaudio.syncRender()
console.log(this.$zaudio)
this.playbackRateIndex = this.playbackRateArr.findIndex(item => {
return item.name == (uni.getBackgroundAudioManager().playbackRate || 1)
})
});
},

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) {
var result = typeof seconds === "string" ? parseFloat(seconds) : seconds;
@@ -218,7 +396,7 @@
Math.floor(result % 60);
return `${h}:${m}:${s}`;
},
//播放or暂停
operate() {
this.$zaudio.operate();
@@ -226,18 +404,19 @@
//进度拖到
change(event) {
if (this.renderIsPlay) {
console.log('组件内', event)
this.$zaudio.seek(Math.floor(event.detail.value));
this.$zaudio.seek(event.detail.value);
}
},
//快进
stepPlay(value) {
if (this.renderData('current') == '00:00:00') return
console.log(this.renderData('current'))
this.$zaudio.stepPlay(value);
},
//切歌
changeplay(count) {
this.$zaudio.changeplay(count);
},
}
},
beforeDestroy() {
this.$zaudio.playinfo.duration = '00:00:00'
@@ -246,6 +425,7 @@
let action = this.action;
this.$zaudio.syncStateOff(action)
this.$zaudio.stop()
this.$zaudio.off('playing', '123')
}
};
</script>
@@ -366,10 +546,9 @@
}

.play {
width: 48rpx;
height: 48rpx;
width: 44rpx;
height: 44rpx;
z-index: 99;
background: rgba(0, 0, 0, 0.4);
border-radius: 50%;
position: absolute;
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 {
padding: 0 32rpx 0 0;
padding: 0 16rpx 0 0;
flex-grow: 1;
display: flex;
align-items: center;


+ 2
- 2
manifest.json View File

@@ -1,5 +1,5 @@
{
"name" : "数智工牌",
"name" : "去房智控管家",
"appid" : "__UNI__7A1611D",
"description" : "去房智控管家",
"versionName" : "1.1.0",
@@ -91,7 +91,7 @@
},
"quickapp" : {},
"mp-weixin" : {
"appid" : "wxe044603515ff2cb5",
"appid" : "wx8f883dca5ecc5510",
"setting" : {
"urlCheck" : false,
"es6" : true,


+ 36
- 2
pages/center/Piabodata/Customerportrait/Receivedetailabout.vue View File

@@ -84,7 +84,7 @@


<view class="bottombox">
<zaudio :duration="duration" theme="theme4"></zaudio>
<zaudio @checkPlaybackRate="checkPlaybackRate" :duration="duration" theme="theme4"></zaudio>
<!-- 底部弹框 -->
<view class="botbotmm">
<view class="tmmchen" @click="guanjiancishifo()">
@@ -457,6 +457,9 @@
duration: '', // 总时长
info: null, // 播放时间
isAudio: 0, // 第一时间定位播放
nowPlaying: 0, // 当前播放位置
stepPosition: 0, // 需要跳转的播放位置
};
},

@@ -492,6 +495,7 @@
})
this.$zaudio.on('playing', this.ACTION, (obj) => {
this.duration = obj.duration
this.nowPlaying = obj.current_value
this.TimeUpdate(this.TIMEEVENT(obj.current))
})
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() {
let data = [{
@@ -1531,6 +1558,13 @@
this.isAudio = 0
}, 2000)
}
if (this.stepPosition != 0) {
setTimeout(() => {
this.stepPlay(this.stepPosition)
}, 1500)
}
setTimeout(() => {
this.$zaudio.operate()
}, 150)
@@ -1595,7 +1629,7 @@

.bottombox {
width: 100%;
height: 170rpx;
min-height: 170rpx;
border-top: 1px solid #E0E0E0;

.bottomhead {


+ 37
- 1
pages/center/prohibited/details.vue View File

@@ -145,7 +145,7 @@
<view class="bottombox">
<!-- 播放块 -->
<template v-if="current == 1">
<zaudio :duration="duration" theme="theme4"></zaudio>
<zaudio @checkPlaybackRate="checkPlaybackRate" :duration="duration" theme="theme4"></zaudio>
</template>

<template v-if="userlistobj.invalidViolatedCause">
@@ -266,6 +266,9 @@
duration: '', // 总时长
allTextList: [], // 所有话术列表
isFirstWords: 0, // 第一个违禁词出现的时间
nowPlaying: 0, // 当前播放位置
stepPosition: 0, // 需要跳转的播放位置
}
},
computed: {
@@ -297,6 +300,7 @@
})
this.$zaudio.on('playing', this.ACTION, (obj) => {
this.duration = obj.duration
this.nowPlaying = obj.current_value
this.TimeUpdate(this.TIMEEVENT(obj.current))
})
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) {
let data = [{
@@ -999,6 +1027,14 @@
this.$zaudio.operate()
}, 150)
}
if (this.stepPosition != 0) {
setTimeout(() => {
this.stepPlay(this.stepPosition)
}, 1500)
}
},

// 跳转指定位置播放


+ 33
- 1
pages/learning/Equinoctial/index.vue View File

@@ -15,7 +15,7 @@
:key="index">录音文件{{index+1}}</view>
</view>
</view>
<zaudio :duration="duration" theme="theme4"></zaudio>
<zaudio @checkPlaybackRate="checkPlaybackRate" :duration="duration" theme="theme4"></zaudio>
</view>
<scroll-view lower-threshold='20px' @scrolltolower="ltolower()" scroll-y="true" class="text scroll-Y"
:scroll-top="scrollTop" :scroll-into-view="scrollId">
@@ -213,6 +213,8 @@
isPageHide: false, // 是否息屏
duration: '',

nowPlaying: 0, // 当前播放位置
stepPosition: 0, // 需要跳转的播放位置
};
},

@@ -248,6 +250,7 @@
})
this.$zaudio.on('playing', this.ACTION, (obj) => {
this.duration = obj.duration
this.nowPlaying = obj.current_value
this.TimeUpdate(this.TIMEEVENT(obj.current))
})
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() {
@@ -700,6 +725,13 @@
this.stepPlay(parseInt(this.startTime / 1000))
})
}
if (this.stepPosition != 0) {
setTimeout(() => {
this.stepPlay(this.stepPosition)
}, 1500)
}

},



+ 35
- 1
pages/learning/Thefulltext/index2.vue View File

@@ -13,7 +13,7 @@
</view>
</view>
<view class="call_record_time_one" >接待时长 {{alltimeStr}}</view>
<zaudio theme="theme4"></zaudio>
<zaudio @checkPlaybackRate="checkPlaybackRate" theme="theme4"></zaudio>
</view>
<scroll-view :scroll-top="scrollTop" lower-threshold='100px' @scrolltolower="ltolower()"
upper-threshold='40px' @scrolltoupper="rolltoupper()"
@@ -185,6 +185,9 @@
ACTION: Symbol('zaudio'), // 唯一值区分每个页面的方法
isPageHide: false, // 是否息屏
duration: '',
nowPlaying: 0, // 当前播放位置
stepPosition: 0, // 需要跳转的播放位置
};
},
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() {
let data = [
@@ -687,6 +712,15 @@
this.$zaudio.setAudio(data)
//渲染第一首音频
this.$zaudio.setRender(0)
if (this.stepPosition != 0) {
setTimeout(() => {
this.stepPlay(this.stepPosition)
}, 1500)
}
},


+ 35
- 1
pages/mine/details.vue View File

@@ -26,7 +26,7 @@
src="../../static/images/nopike.png" mode=""></image>
</view>
</view>
<zaudio :duration="duration" theme="theme4"></zaudio>
<zaudio @checkPlaybackRate="checkPlaybackRate" :duration="duration" theme="theme4"></zaudio>
</view>
<scroll-view :scroll-top="scrollTop" lower-threshold='20px' @scrolltolower="ltolower()"
:scroll-into-view="scrollId" scroll-y="true" class="text scroll-Y">
@@ -256,6 +256,9 @@
isPageHide: false, // 是否息屏
duration: '', // 总时长
eqLog:0,
nowPlaying: 0, // 当前播放位置
stepPosition: 0, // 需要跳转的播放位置
};
},

@@ -281,6 +284,7 @@
})
this.$zaudio.on('playing', this.ACTION, (obj) => {
console.log(obj, '12312321')
this.nowPlaying = obj.current_value
this.TimeUpdate(this.TIMEEVENT(obj.current))
})
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() {
let data = this.luyinList.map((item, index) => {
@@ -1160,6 +1187,13 @@
this.$zaudio.setAudio(data)
//渲染第一首音频
this.$zaudio.setRender(0)
if (this.stepPosition != 0) {
setTimeout(() => {
this.stepPlay(this.stepPosition)
}, 1500)
}
setTimeout(() => {
this.$zaudio.operate()
}, 150)


+ 36
- 2
pages/mine/details2.vue View File

@@ -97,7 +97,7 @@
</scroll-view>
<view class="bottombox" v-if="!refined">
<!-- 播放块 :src="recordPath" -->
<zaudio :duration="duration" theme="theme4"></zaudio>
<zaudio @checkPlaybackRate="checkPlaybackRate" :duration="duration" theme="theme4"></zaudio>
<!-- 底部弹框 -->
<view class="botbotmm">
<view class="tmmchen" @click="guanjiancishifo()">
@@ -725,6 +725,10 @@
templateList: [], // 销讲业务
showTemplate: false, // 展示选择销讲业务弹窗
templateName: '', // 销讲业务类型文字
nowPlaying: 0, // 当前播放位置
stepPosition: 0, // 需要跳转的播放位置
};
},
computed: {
@@ -783,6 +787,7 @@
})
this.$zaudio.on('playing', this.ACTION, (obj) => {
this.duration = obj.duration
this.nowPlaying = obj.current_value
this.TimeUpdate(this.TIMEEVENT(obj.current))
})
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() {
@@ -2186,9 +2213,16 @@
//渲染第一首音频
this.$zaudio.setRender(0)

if (this.stepPosition != 0) {
setTimeout(() => {
this.stepPlay(this.stepPosition)
}, 1500)
}
setTimeout(() => {
this.$zaudio.operate()
}, 150)
},

// 跳转指定位置播放
@@ -2250,7 +2284,7 @@

.bottombox {
width: 100%;
height: 170rpx;
min-height: 170rpx;
border-top: 1px solid #E0E0E0;
/* iphonex 等安全区设置，底部安全区适配 */
padding-bottom: constant(safe-area-inset-bottom);


Write Preview
Loading…
Cancel
Save