@@ -108,6 +108,7 @@ class ZAudio extends util_1.EventBus { | |||
singer: "", | |||
coverImgUrl: "", | |||
}; | |||
this.playbackRate = 1 | |||
this.paused = true; | |||
this.uPause = false; | |||
this.autoPlay = false; | |||
@@ -136,6 +137,7 @@ class ZAudio extends util_1.EventBus { | |||
var audioCtx = uni.createInnerAudioContext(); | |||
audioCtx.autoplay = this.autoPlay; | |||
// #endif | |||
// audioCtx.playbackRate = 2 | |||
this.audioCtx = audioCtx; | |||
this.audioCtx.onWaiting(this.onWaitingHandler.bind(this)); | |||
this.audioCtx.onCanplay(this.onCanplayHandler.bind(this)); | |||
@@ -448,7 +448,7 @@ | |||
} | |||
&.top { | |||
margin: 0 60rpx; | |||
// margin: 0 60rpx; | |||
} | |||
} | |||
@@ -468,4 +468,22 @@ | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.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%; | |||
} | |||
} |
@@ -42,13 +42,21 @@ | |||
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> | |||
@@ -165,14 +173,14 @@ | |||
<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"> | |||
@@ -196,13 +204,21 @@ | |||
mode="widthFix"> | |||
</image> | |||
</view> | |||
<view class="forward-item" style="margin-left: 0;"> | |||
<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> | |||
@@ -216,6 +232,7 @@ | |||
</template> | |||
<script> | |||
import ZAudio from './index.js' | |||
export default { | |||
props: { | |||
theme: { | |||
@@ -248,6 +265,24 @@ | |||
nowInfo: {}, // 当前播放info | |||
scrollObjS: {}, // 滚动对象 | |||
playbackRateArr: [{ | |||
name: 1, | |||
}, | |||
// { | |||
// name: 1.25, | |||
// }, | |||
{ | |||
name: 1.5, | |||
}, | |||
// { | |||
// name: 1.75, | |||
// }, | |||
{ | |||
name: 2, | |||
}, | |||
], // 倍速播放 | |||
playbackRateIndex: 0, // 倍速播放下标 | |||
}; | |||
}, | |||
computed: { | |||
@@ -288,10 +323,22 @@ | |||
this.loading = loading; | |||
}); | |||
this.$zaudio.syncRender() | |||
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 => { | |||
@@ -527,6 +574,23 @@ | |||
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; | |||
@@ -82,6 +82,7 @@ | |||
"usingComponents" : true, | |||
"permission" : {}, | |||
"requiredBackgroundModes" : [ "audio" ], | |||
"lazyCodeLoading": "requiredComponents", | |||
"plugins" : { | |||
"WechatSI" : { | |||
"version" : "0.3.4", | |||
@@ -105,5 +106,8 @@ | |||
"router" : { | |||
"base" : "/pages/login/guide" | |||
} | |||
}, | |||
"uniStatistics" : { | |||
"version" : "1" | |||
} | |||
} |
@@ -88,7 +88,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()"> | |||
@@ -464,6 +464,9 @@ | |||
ACTION: Symbol('zaudio'), // 唯一值区分每个页面的方法 | |||
isPageHide: false, // 是否息屏 | |||
duration: '', // 总时长 | |||
nowPlaying: 0, // 当前播放位置 | |||
stepPosition: 0, // 需要跳转的播放位置 | |||
}; | |||
}, | |||
@@ -488,6 +491,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 => { | |||
@@ -1467,7 +1471,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() { | |||
let data = [{ | |||
@@ -1480,6 +1507,11 @@ | |||
//渲染第一首音频 | |||
this.$zaudio.setRender(0) | |||
if (this.stepPosition != 0) { | |||
setTimeout(() => { | |||
this.stepPlay(this.stepPosition) | |||
}, 1500) | |||
} | |||
setTimeout(() => { | |||
this.$zaudio.operate() | |||
}, 150) | |||
@@ -15,7 +15,7 @@ | |||
</view> | |||
</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"> | |||
@@ -215,6 +215,9 @@ | |||
isPageHide: false, // 是否息屏 | |||
duration: '', // 播放时长 | |||
marketingId: 0, // 当前选中的id | |||
nowPlaying: 0, // 当前播放位置 | |||
stepPosition: 0, // 需要跳转的播放位置 | |||
}; | |||
}, | |||
@@ -258,6 +261,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 => { | |||
@@ -793,6 +797,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() { | |||
let data = this.luyinList.map((item, index) => { | |||
@@ -806,6 +834,12 @@ | |||
this.$zaudio.setAudio(data) | |||
//渲染第一首音频 | |||
this.$zaudio.setRender(0) | |||
if (this.stepPosition != 0) { | |||
setTimeout(() => { | |||
this.stepPlay(this.stepPosition) | |||
}, 1500) | |||
} | |||
}, | |||
// 跳转指定位置播放 | |||
@@ -14,7 +14,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()" :scroll-into-view="scrollId" scroll-y="true" class="text scroll-Y"> | |||
@@ -217,6 +217,9 @@ | |||
ACTION: Symbol('zaudio'), // 唯一值区分每个页面的方法 | |||
isPageHide: false, // 是否息屏 | |||
duration: '', | |||
nowPlaying: 0, // 当前播放位置 | |||
stepPosition: 0, // 需要跳转的播放位置 | |||
}; | |||
}, | |||
onLoad(options) { | |||
@@ -243,6 +246,7 @@ | |||
}) | |||
this.$zaudio.on('playing', this.ACTION, (obj) => { | |||
this.duration = obj.duration | |||
this.nowPlaying = obj.current_value | |||
this.TimeUpdate(this.TIMEEVENT(obj.current)) | |||
}) | |||
@@ -710,6 +714,30 @@ | |||
this.textareaFocus = false; | |||
}, | |||
// 迅速切换音频源并切换回来 | |||
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 = [{ | |||
@@ -721,6 +749,12 @@ | |||
this.$zaudio.setAudio(data) | |||
//渲染第一首音频 | |||
this.$zaudio.setRender(0) | |||
if (this.stepPosition != 0) { | |||
setTimeout(() => { | |||
this.stepPlay(this.stepPosition) | |||
}, 1500) | |||
} | |||
}, | |||
@@ -27,7 +27,7 @@ | |||
src="../../static/images/nopike.png" mode=""></image> | |||
</view> | |||
</view> | |||
<zaudio theme="theme4"></zaudio> | |||
<zaudio @checkPlaybackRate="checkPlaybackRate" 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"> | |||
@@ -279,7 +279,10 @@ | |||
ACTION: Symbol('zaudios'), // 唯一值区分每个页面的方法 | |||
isPageHide: false, // 是否息屏 | |||
isNum: false | |||
isNum: false, | |||
nowPlaying: 0, // 当前播放位置 | |||
stepPosition: 0, // 需要跳转的播放位置 | |||
}; | |||
}, | |||
@@ -300,6 +303,7 @@ | |||
this.sliderChangeComplate(this.TIMEEVENT(time)) | |||
}) | |||
this.$zaudio.on('playing', this.ACTION, (obj) => { | |||
this.nowPlaying = obj.current_value | |||
this.TimeUpdate(this.TIMEEVENT(obj.current)) | |||
}) | |||
this.$zaudio.on('ended', this.ACTION, e => { | |||
@@ -1048,7 +1052,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() { | |||
let data = this.luyinList.map((item, index) => { | |||
@@ -1066,6 +1093,12 @@ | |||
setTimeout(() => { | |||
this.$zaudio.operate() | |||
}, 150) | |||
if (this.stepPosition != 0) { | |||
setTimeout(() => { | |||
this.stepPlay(this.stepPosition) | |||
}, 1500) | |||
} | |||
this.$forceUpdate() | |||
}, | |||
@@ -87,7 +87,7 @@ | |||
</scroll-view> | |||
<view class="bottombox" v-if="!refined"> | |||
<!-- 播放块 --> | |||
<zaudio :duration="duration" theme="theme4"></zaudio> | |||
<zaudio @checkPlaybackRate="checkPlaybackRate" :duration="duration" theme="theme4"></zaudio> | |||
<!-- 底部弹框 --> | |||
<view class="botbotmm"> | |||
<view class="tmmchen" @click="guanjiancishifo()"> | |||
@@ -585,6 +585,8 @@ | |||
isNum: false, | |||
eqLog: 0, | |||
refined: false, // 多选加精; | |||
nowPlaying: 0, // 当前播放位置 | |||
stepPosition: 0, // 需要跳转的播放位置 | |||
}; | |||
}, | |||
computed: { | |||
@@ -612,6 +614,7 @@ | |||
//实时渲染当前的播放状态 | |||
this.$zaudio.syncRender() | |||
this.duration = obj.duration | |||
this.nowPlaying = obj.current_value | |||
this.TimeUpdate(this.TIMEEVENT(obj.current)) | |||
}) | |||
@@ -1861,6 +1864,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() { | |||
let data = [{ | |||
@@ -1877,6 +1904,11 @@ | |||
this.$zaudio.operate() | |||
}, 150) | |||
} | |||
if (this.stepPosition != 0) { | |||
setTimeout(() => { | |||
this.stepPlay(this.stepPosition) | |||
}, 1500) | |||
} | |||
}, | |||
// 跳转指定位置播放 | |||
@@ -2607,7 +2639,7 @@ | |||
margin: 30rpx; | |||
line-height: 80rpx; | |||
display: flex; | |||
.contentInfo { | |||
.info { | |||
.AudioUserName { | |||