Browse Source

播放器修改

dmb
douzhuo 1 year ago
parent
commit
4e5a023af3
9 changed files with 270 additions and 17 deletions
  1. +2
    -0
      components/uniapp-zaudio/dist/zaudio.js
  2. +20
    -2
      components/uniapp-zaudio/index.scss
  3. +70
    -6
      components/uniapp-zaudio/zaudio.vue
  4. +4
    -0
      manifest.json
  5. +34
    -2
      pages/center/Piabodata/Customerportrait/Receivedetailabout.vue
  6. +35
    -1
      pages/learning/Equinoctial/index.vue
  7. +35
    -1
      pages/learning/Thefulltext/index2.vue
  8. +36
    -3
      pages/mine/details.vue
  9. +34
    -2
      pages/mine/details2.vue

+ 2
- 0
components/uniapp-zaudio/dist/zaudio.js View File

@@ -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));


+ 20
- 2
components/uniapp-zaudio/index.scss View File

@@ -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%;
}
}

+ 70
- 6
components/uniapp-zaudio/zaudio.vue View File

@@ -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;


+ 4
- 0
manifest.json View File

@@ -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"
}
}

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

@@ -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)


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

@@ -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)
}
},

// 跳转指定位置播放


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

@@ -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)
}
},




+ 36
- 3
pages/mine/details.vue View File

@@ -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()
},



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

@@ -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 {


Loading…
Cancel
Save