zm/sociology_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

音频

Browse Source
This commit is contained in:
始于初见
2024-10-16 16:53:39 +08:00
parent c1f78fe598
commit ac451d6403
28 changed files with 4148 additions and 607 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
uni_modules/cx-audio-play/changelog.md Normal file
View File

@@ -0,0 +1,16 @@
## 2.0.1（2023-12-15）
优化体积和倍数播放功能
## 2.0.0（2023-12-15）
修改一些bug，兼容基本平台
## 1.0.7（2023-12-15）
优化功能体积速度
## 1.0.5（2023-12-15）
优化功能，兼容基本平台
## 1.0.4（2023-12-15）
简化代码，优化功能，处理一些bug
## 1.0.3（2023-02-09）
修改切换的某些bug，新增自动播放下一首功能
## 1.0.2（2022-12-16）
适配app平台
## 1.0.1（2022-12-16）
1.0.1

576
uni_modules/cx-audio-play/components/cx-audio-play/cx-audio-play.vue Normal file
View File

@@ -0,0 +1,576 @@
<template>
<!--音频组件-->
<view>
<view class="bgfff">
<view>
<view class="audo-video">
<!--音频播放按钮处-->
<view class="audo-top">
<!--上一首切换按钮-->
<image v-if="jian" style="width:50rpx;height:50rpx;" @click="nosig" src="/static/sys.png" mode="aspectFill"></image>
<image v-else @click="sig" src="/static/xys.png" style="width:50rpx;height:50rpx;transform:rotate(180deg)"
mode="aspectFill"></image>
<!--上一首切换按钮-->
<!--快退按钮-->
<image src="/static/kt.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="kt()"></image>
<!--快退按钮-->
<!--播放按钮-->
<image :src="succes?'/static/bofang2.png':'/static/zt.png'" mode="aspectFill"
style="width:180rpx;height:180rpx;" @click="plays()"></image>
<!--播放按钮-->
<!--快进按钮-->
<image src="/static/kj.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="kj()"></image>
<!--快进按钮-->
<!--下一首切换按钮-->
<image v-if="jia" @click="noxig" style="width:50rpx;height:50rpx;transform:rotate(180deg)" src="/static/sys.png"
mode="aspectFill"> </image>
<image v-else style="width:50rpx;height:50rpx;" src="/static/xys.png" @click="xig" mode="aspectFill"></image>
<!--下一首切换按钮-->
</view>
<!--音频播放按钮处-->
<!--音频api处[视频代替音频-实现倍数功能]-->
<video id="myVideo" ref="myVideo" :src="recorPath" class="hidden" @timeupdate="timeupdate"
:autoplay="autoplays" @loadedmetadata="loadedmetadata" @ended="next" controls
style="width: 10rpx;height:10rpx;">
</video>
<!--音频api处[视频代替音频-实现倍数功能]-->
<view class="audo-a" style="margin:0 auto;">
<!--进度条-->
<view class="slider-box">
<text class="mm">{{timer}}</text>
<slider style="width: 370rpx;" @change="sliderChange" @changing="sliderChanging"
class="audio-slider" block-size="16" :min="0" :max="duration" :value="currentTime"
activeColor="#FFA929" @touchstart="lock= true" @touchend="lock = false" />
<text class="ss" v-if="overTimer!='NaN:NaN'">{{overTimer}}</text>
<text class="ss" v-else>00.00</text>
</view>
<!--进度条-->
<!--倍数-->
<view class="beishu" style="border:3rpx solid #C8C9CC;" @click="beishu">{{BsNav[bsindex].bs}} X
</view>
<view class="absolute" style="right:0;top:80rpx;" v-if="shows">
<!-- <u-transition :show="show" mode="slide-right" duration="300"> -->
<view class="beishu-a" style="border:2rpx solid #C8C9CC;" v-if="show">
<view v-for="(item,index) in BsNav" :key="index" @click="setRate(index,item)"
class="title" :style="{color:bsid==item.id?'#8D48FE':''}">
{{item.bs}} X
</view>
</view>
<!-- </u-transition> -->
</view>
<!--倍数-->
</view>
</view>
</view>
</view>
<view class="h-100"></view>
<!--占位-->
</view>
<!--音频组件 Author:chenxin-->
</template>
<script>
/*
list -- 音频文件传入 不传无法播放/数组形式
Faskms -- 快进秒数 number 默认15秒
Slowms -- 快退秒数 number 默认15秒
autoNext -- 是否自动播放下一首
autoplays -- 进入页面是否自动播放 - 默认false
slideYes -- 滑动进度条时是否开启播放 - 默认false
switAud -- 切换上下音频是否开启播放 - 默认false
BsNav -- 倍数数据传入/数组形式
按钮图片未自定义，如想改动请在组件内部修改，页面头部已注释 -- 逻辑根据自己需求改
目前只测试 微信小程序和H5和APP -- 其他平台未知
Author:chenxin 交流vx:cxalq8-24
*/
export default {
name: "cx-audio-play",
props: {
list: { //音频数据
Type: Array,
default: () => []
},
Faskms: { //快进秒数
Type: Number,
default: 15,
},
Slowms: { //快退秒数
Type: Number,
default: 15,
},
autoNext: {
Type: Boolean,
default: false,
},
autoplays: { //是否开启自动播放
Type: Boolean,
default: false,
},
slideYes: { //滑动进度条 - 是否开启播放
Type: Boolean,
default: false,
},
switAud: {
Type: Boolean, //切换上下音频 - 是否开启播放
default: false,
},
BsNav: { //倍数-传入
Type: Array,
default: () => [{
id: 1.0,
bs: '1.0',
}, {
id: 1.5,
bs: '1.5'
}, {
id: 2.0,
bs: '2.0'
}],
},
},
data() {
return {
shows: false, //倍数弹框
show: true, //倍数弹框动画默认开启
jian: true, //减-切换图标
jia: true, //加-切换图标
succes: false, //播放按钮
bsid: '', //倍数默认显示第一个
bsindex: 0, //倍数默认显示第一个
num: 0,
current: 0, //当前选中的索引
recorPath: '', //音频播放地址
lock: false, // 锁
currentTime: 0, //当前进度
duration: 100, // 总进度
videoContext: null,
loading: true, //锁 加载
}
},
onReady() {},
onShow() {},
mounted() {
this.videoContext = uni.createVideoContext('myVideo', this)
//默认播放第一个 -- 按钮展示
if (this.list.length != 0) {
this.recorPath = this.list[0].recorPath
if (this.list.length > 1) { //音频文件大于1 -- 下一个切换默认显示
this.jia = false
if (this.autoplays) {
this.succes = true
}
}
}
//倍数默认处理
if (this.BsNav.length != 0) {
this.bsid = this.BsNav[0].id
this.$nextTick(() => {
//#ifdef H5
this.$refs.myVideo.playbackRate(this.bsid)
//#endif
//#ifndef H5
this.videoContext.playbackRate(this.bsid)
//#endif
})
}
},
updated() {
},
onLoad() {
},
onHide() { //监听页面离开 - 销毁音频
//#ifdef H5
this.$refs.myVideo.stop();
//#endif
//#ifndef H5
this.videoContext.stop();
//#endif
},
onUnload() { //监听页面卸载 - 销毁音频
//#ifdef H5
this.$refs.myVideo.stop();
//#endif
//#ifndef H5
this.videoContext.stop();
//#endif
},
destroyed() {
// this.innerAudioContext.stop();
},
computed: {
timer() {
return calcTimer(this.currentTime)
},
overTimer() {
return calcTimer(this.duration)
}
},
watch: {
},
methods: {
plays() { //播放暂停
if (!this.list || this.list.length == 0) {
console.log('暂无音频数据~')
return;
}
this.playloading()
this.succes = !this.succes
if (this.succes) {
// this.currentTime = 0
// console.log('-----------------')
//#ifdef H5
this.$refs.myVideo.play()
//#endif
//#ifndef H5
this.videoContext.play()
//#endif
} else {
uni.hideLoading()
//#ifdef H5
this.$refs.myVideo.pause()
//#endif
//#ifndef H5
this.videoContext.pause()
//#endif
}
},
beishu() { //倍速弹框
this.shows = !this.shows
},
// 倍速
setRate(index, item) {
this.bsid = item.id
this.bsindex = index
this.shows = false
//#ifdef H5
this.$refs.myVideo.playbackRate(item.id)
//#endif
//#ifndef H5
this.videoContext.playbackRate(item.id)
//#endif
},
// 更新进度条
timeupdate(event) {
if (this.lock) return; // 锁
var currentTime, duration;
if (event.detail.detail) {
currentTime = event.detail.detail.currentTime
duration = event.detail.detail.duration
} else {
currentTime = event.detail.currentTime
duration = event.detail.duration
}
this.currentTime = currentTime
this.duration = duration
},
// 拖动进度条
sliderChange(data) {
//此处滑动进度条--开始播放
if (this.slideYes && !this.succes) {
//#ifdef H5
this.$refs.myVideo.play()
//#endif
//#ifndef H5
this.videoContext.play()
//#endif
this.succes = true
}
//#ifdef H5
this.$refs.myVideo.seek(data.detail.value) //获取秒数
//#endif
//#ifndef H5
this.videoContext.seek(data.detail.value) //获取秒数
//#endif
},
//拖动中
sliderChanging(data) {
if (data.detail.value == 0) {
this.succes = false
//#ifdef H5
this.$refs.myVideo.pause()
//#endif
//#ifndef H5
this.videoContext.pause()
//#endif
}
this.currentTime = data.detail.value
},
// 视频加载完成
loadedmetadata(data) {
this.duration = data.detail.duration
},
sig() { //上一首
if (!this.list || this.list.length == 0) {
console.log('暂无音频数据~')
return;
}
this.num -= 1
if (this.num < this.list.length) {
this.loading = true
this.playloading() //加载框
}
if (this.num + 1 < this.list.length && this.num + 1 != 1) { //点击上一首小于音频数据总长度
this.jia = false // 下按钮-亮且可点击
this.jian = false // 上按钮-亮且可点击
} else {
this.jian = true // 上按钮-灰且阻止
this.jia = false // 下按钮-亮且可点击
}
this.recorPath = this.list[this.num].recorPath
if (this.switAud) { //切换时是否默认开启播放
this.succes = true
setTimeout(() => {
//#ifdef H5
this.$refs.myVideo.play()
//#endif
//#ifndef H5
this.videoContext.play()
//#endif
}, 100)
} else {
this.succes = false
}
},
xig() { //下一首
if (!this.list || this.list.length == 0) {
console.log('暂无音频数据~')
return;
}
this.num += 1
if (this.num < this.list.length) {
this.loading = true
this.playloading() //加载框
}
if (this.num + 1 < this.list.length) { //点击下一首小于音频数据总长度
this.jia = false // 下按钮-亮且可点击
this.jian = false // 上按钮-亮且可点击
} else { //大于总长度
this.jia = true //下按钮 - 灰且阻止
this.jian = false //上按钮 - 亮可点击
}
this.recorPath = this.list[this.num].recorPath
if (this.switAud) { //切换时是否默认开启播放
this.succes = true
setTimeout(() => {
//#ifdef H5
this.$refs.myVideo.play()
//#endif
//#ifndef H5
this.videoContext.play()
//#endif
}, 100)
} else {
this.succes = false
}
},
nosig() {
uni.showToast({
title: '到头了~',
icon: "none"
})
},
noxig() {
uni.showToast({
title: '没有更多了~',
icon: "none"
})
},
kt() { //快退
if (!this.list || this.list.length == 0) {
console.log('暂无音频数据~')
return;
}
let a = (this.currentTime - Math.floor(15 % 60)).toFixed(0) //当前时间-15秒
if (a < 1) {
this.succes = false
//#ifdef H5
this.$refs.myVideo.pause()
//#endif
//#ifndef H5
this.videoContext.pause()
//#endif
}
//#ifdef H5
this.$refs.myVideo.seek(a)
//#endif
//#ifndef H5
this.videoContext.seek(a)
//#endif
},
kj() { //快进
if (!this.list || this.list.length == 0) {
console.log('暂无音频数据~')
return;
}
let a = (this.currentTime + Math.floor(15 % 60)).toFixed(0) //当前时间+15秒
//#ifdef H5
this.$refs.myVideo.seek(a)
//#endif
//#ifndef H5
this.videoContext.seek(a)
//#endif
},
next(data) { //监听音频结束
this.succes = false
/*音频结束--是否自动播放下一首*/
if (!this.autoNext) {
return
}
if (this.num + 1 < this.list.length) {
this.succes = true
this.num += 1
this.recorPath = this.list[this.num].recorPath
setTimeout(() => {
//#ifdef H5
this.$refs.myVideo.play()
//#endif
//#ifndef H5
this.videoContext.play()
//#endif
}, 100)
} else {
this.jia = true //下按钮 - 灰且阻止
this.jian = false //上按钮 - 亮可点击
}
// console.log('音频结束-------')
},
playloading() { //加载框--封
if (this.loading) {
uni.showLoading({
title: "音频缓存中..."
})
this.loading = false
}
setTimeout(() => {
uni.hideLoading()
}, 1600)
},
},
watch: {}
}
//时间换算
function calcTimer(timer) {
if (timer === 0 || typeof timer !== 'number') {
return '00:00'
}
let mm = Math.floor(timer / 60)
let ss = Math.floor(timer % 60)
if (mm < 10) {
mm = '0' + mm
}
if (ss < 10) {
ss = '0' + ss
}
return mm + ':' + ss
}
</script>
<style lang="scss" scoped>
page {
background-color: #F6F6F8;
}
/* #video {
width: 100%;
} */
.audo-video {
padding-bottom: 20rpx;
color: #999;
}
.slider-box {
display: flex;
align-items: center;
justify-content: center;
font-size: 27rpx;
color: #999;
}
button {
display: inline-block;
width: 100rpx;
background-color: #fff;
font-size: 24rpx;
color: #000;
padding: 0;
}
.hidden {
position: fixed;
top: 0;
left: -10rpx;
z-index: -1;
width: 1rpx;
height: 1rpx;
}
.audo-top {
padding: 20rpx 40rpx;
display: flex;
justify-content: space-around;
align-items: center;
image {
width: 45rpx;
height: 45rpx;
}
}
.audo-a {
display: flex;
justify-content: space-between;
align-items: center;
width: 700rpx;
position: relative;
z-index: 9;
}
.beishu {
position: relative;
width: 100rpx;
padding-top: 5rpx;
padding-bottom: 5rpx;
text-align: center;
border-radius: 25rpx;
font-size: 28rpx;
}
.absolute {
position: absolute;
.beishu-a {
width: 200rpx;
border-radius: 20rpx;
text-align: center;
line-height: 90rpx;
background: #fff;
.title {
pdding-left: 30rpx;
}
}
}
</style>

576
uni_modules/cx-audio-play/cx-audio-play.vue Normal file
View File

@@ -0,0 +1,576 @@
<template>
<!--音频组件-->
<view>
<view class="bgfff">
<view>
<view class="audo-video">
<!--音频播放按钮处-->
<view class="audo-top">
<!--上一首切换按钮-->
<image v-if="jian" style="width:50rpx;height:50rpx;" @click="nosig" src="/static/sys.png" mode="aspectFill"></image>
<image v-else @click="sig" src="/static/xys.png" style="width:50rpx;height:50rpx;transform:rotate(180deg)"
mode="aspectFill"></image>
<!--上一首切换按钮-->
<!--快退按钮-->
<image src="/static/kt.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="kt()"></image>
<!--快退按钮-->
<!--播放按钮-->
<image :src="succes?'/static/bofang2.png':'/static/zt.png'" mode="aspectFill"
style="width:180rpx;height:180rpx;" @click="plays()"></image>
<!--播放按钮-->
<!--快进按钮-->
<image src="/static/kj.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="kj()"></image>
<!--快进按钮-->
<!--下一首切换按钮-->
<image v-if="jia" @click="noxig" style="width:50rpx;height:50rpx;transform:rotate(180deg)" src="/static/sys.png"
mode="aspectFill"> </image>
<image v-else style="width:50rpx;height:50rpx;" src="/static/xys.png" @click="xig" mode="aspectFill"></image>
<!--下一首切换按钮-->
</view>
<!--音频播放按钮处-->
<!--音频api处[视频代替音频-实现倍数功能]-->
<video id="myVideo" ref="myVideo" :src="recorPath" class="hidden" @timeupdate="timeupdate"
:autoplay="autoplays" @loadedmetadata="loadedmetadata" @ended="next" controls
style="width: 10rpx;height:10rpx;">
</video>
<!--音频api处[视频代替音频-实现倍数功能]-->
<view class="audo-a" style="margin:0 auto;">
<!--进度条-->
<view class="slider-box">
<text class="mm">{{timer}}</text>
<slider style="width: 370rpx;" @change="sliderChange" @changing="sliderChanging"
class="audio-slider" block-size="16" :min="0" :max="duration" :value="currentTime"
activeColor="#FFA929" @touchstart="lock= true" @touchend="lock = false" />
<text class="ss" v-if="overTimer!='NaN:NaN'">{{overTimer}}</text>
<text class="ss" v-else>00.00</text>
</view>
<!--进度条-->
<!--倍数-->
<view class="beishu" style="border:3rpx solid #C8C9CC;" @click="beishu">{{BsNav[bsindex].bs}} X
</view>
<view class="absolute" style="right:0;top:80rpx;" v-if="shows">
<!-- <u-transition :show="show" mode="slide-right" duration="300"> -->
<view class="beishu-a" style="border:2rpx solid #C8C9CC;" v-if="show">
<view v-for="(item,index) in BsNav" :key="index" @click="setRate(index,item)"
class="title" :style="{color:bsid==item.id?'#8D48FE':''}">
{{item.bs}} X
</view>
</view>
<!-- </u-transition> -->
</view>
<!--倍数-->
</view>
</view>
</view>
</view>
<view class="h-100"></view>
<!--占位-->
</view>
<!--音频组件 Author:chenxin-->
</template>
<script>
/*
list -- 音频文件传入 不传无法播放/数组形式
Faskms -- 快进秒数 number 默认15秒
Slowms -- 快退秒数 number 默认15秒
autoNext -- 是否自动播放下一首
autoplays -- 进入页面是否自动播放 - 默认false
slideYes -- 滑动进度条时是否开启播放 - 默认false
switAud -- 切换上下音频是否开启播放 - 默认false
BsNav -- 倍数数据传入/数组形式
按钮图片未自定义，如想改动请在组件内部修改，页面头部已注释 -- 逻辑根据自己需求改
目前只测试 微信小程序和H5和APP -- 其他平台未知
Author:chenxin 交流vx:cxalq8-24
*/
export default {
name: "cx-audio-play",
props: {
list: { //音频数据
Type: Array,
default: () => []
},
Faskms: { //快进秒数
Type: Number,
default: 15,
},
Slowms: { //快退秒数
Type: Number,
default: 15,
},
autoNext: {
Type: Boolean,
default: false,
},
autoplays: { //是否开启自动播放
Type: Boolean,
default: false,
},
slideYes: { //滑动进度条 - 是否开启播放
Type: Boolean,
default: false,
},
switAud: {
Type: Boolean, //切换上下音频 - 是否开启播放
default: false,
},
BsNav: { //倍数-传入
Type: Array,
default: () => [{
id: 1.0,
bs: '1.0',
}, {
id: 1.5,
bs: '1.5'
}, {
id: 2.0,
bs: '2.0'
}],
},
},
data() {
return {
shows: false, //倍数弹框
show: true, //倍数弹框动画默认开启
jian: true, //减-切换图标
jia: true, //加-切换图标
succes: false, //播放按钮
bsid: '', //倍数默认显示第一个
bsindex: 0, //倍数默认显示第一个
num: 0,
current: 0, //当前选中的索引
recorPath: '', //音频播放地址
lock: false, // 锁
currentTime: 0, //当前进度
duration: 100, // 总进度
videoContext: null,
loading: true, //锁 加载
}
},
onReady() {},
onShow() {},
mounted() {
this.videoContext = uni.createVideoContext('myVideo', this)
//默认播放第一个 -- 按钮展示
if (this.list.length != 0) {
this.recorPath = this.list[0].recorPath
if (this.list.length > 1) { //音频文件大于1 -- 下一个切换默认显示
this.jia = false
if (this.autoplays) {
this.succes = true
}
}
}
//倍数默认处理
if (this.BsNav.length != 0) {
this.bsid = this.BsNav[0].id
this.$nextTick(() => {
//#ifdef H5
this.$refs.myVideo.playbackRate(this.bsid)
//#endif
//#ifndef H5
this.videoContext.playbackRate(this.bsid)
//#endif
})
}
},
updated() {
},
onLoad() {
},
onHide() { //监听页面离开 - 销毁音频
//#ifdef H5
this.$refs.myVideo.stop();
//#endif
//#ifndef H5
this.videoContext.stop();
//#endif
},
onUnload() { //监听页面卸载 - 销毁音频
//#ifdef H5
this.$refs.myVideo.stop();
//#endif
//#ifndef H5
this.videoContext.stop();
//#endif
},
destroyed() {
// this.innerAudioContext.stop();
},
computed: {
timer() {
return calcTimer(this.currentTime)
},
overTimer() {
return calcTimer(this.duration)
}
},
watch: {
},
methods: {
plays() { //播放暂停
if (!this.list || this.list.length == 0) {
console.log('暂无音频数据~')
return;
}
this.playloading()
this.succes = !this.succes
if (this.succes) {
// this.currentTime = 0
// console.log('-----------------')
//#ifdef H5
this.$refs.myVideo.play()
//#endif
//#ifndef H5
this.videoContext.play()
//#endif
} else {
uni.hideLoading()
//#ifdef H5
this.$refs.myVideo.pause()
//#endif
//#ifndef H5
this.videoContext.pause()
//#endif
}
},
beishu() { //倍速弹框
this.shows = !this.shows
},
// 倍速
setRate(index, item) {
this.bsid = item.id
this.bsindex = index
this.shows = false
//#ifdef H5
this.$refs.myVideo.playbackRate(item.id)
//#endif
//#ifndef H5
this.videoContext.playbackRate(item.id)
//#endif
},
// 更新进度条
timeupdate(event) {
if (this.lock) return; // 锁
var currentTime, duration;
if (event.detail.detail) {
currentTime = event.detail.detail.currentTime
duration = event.detail.detail.duration
} else {
currentTime = event.detail.currentTime
duration = event.detail.duration
}
this.currentTime = currentTime
this.duration = duration
},
// 拖动进度条
sliderChange(data) {
//此处滑动进度条--开始播放
if (this.slideYes && !this.succes) {
//#ifdef H5
this.$refs.myVideo.play()
//#endif
//#ifndef H5
this.videoContext.play()
//#endif
this.succes = true
}
//#ifdef H5
this.$refs.myVideo.seek(data.detail.value) //获取秒数
//#endif
//#ifndef H5
this.videoContext.seek(data.detail.value) //获取秒数
//#endif
},
//拖动中
sliderChanging(data) {
if (data.detail.value == 0) {
this.succes = false
//#ifdef H5
this.$refs.myVideo.pause()
//#endif
//#ifndef H5
this.videoContext.pause()
//#endif
}
this.currentTime = data.detail.value
},
// 视频加载完成
loadedmetadata(data) {
this.duration = data.detail.duration
},
sig() { //上一首
if (!this.list || this.list.length == 0) {
console.log('暂无音频数据~')
return;
}
this.num -= 1
if (this.num < this.list.length) {
this.loading = true
this.playloading() //加载框
}
if (this.num + 1 < this.list.length && this.num + 1 != 1) { //点击上一首小于音频数据总长度
this.jia = false // 下按钮-亮且可点击
this.jian = false // 上按钮-亮且可点击
} else {
this.jian = true // 上按钮-灰且阻止
this.jia = false // 下按钮-亮且可点击
}
this.recorPath = this.list[this.num].recorPath
if (this.switAud) { //切换时是否默认开启播放
this.succes = true
setTimeout(() => {
//#ifdef H5
this.$refs.myVideo.play()
//#endif
//#ifndef H5
this.videoContext.play()
//#endif
}, 100)
} else {
this.succes = false
}
},
xig() { //下一首
if (!this.list || this.list.length == 0) {
console.log('暂无音频数据~')
return;
}
this.num += 1
if (this.num < this.list.length) {
this.loading = true
this.playloading() //加载框
}
if (this.num + 1 < this.list.length) { //点击下一首小于音频数据总长度
this.jia = false // 下按钮-亮且可点击
this.jian = false // 上按钮-亮且可点击
} else { //大于总长度
this.jia = true //下按钮 - 灰且阻止
this.jian = false //上按钮 - 亮可点击
}
this.recorPath = this.list[this.num].recorPath
if (this.switAud) { //切换时是否默认开启播放
this.succes = true
setTimeout(() => {
//#ifdef H5
this.$refs.myVideo.play()
//#endif
//#ifndef H5
this.videoContext.play()
//#endif
}, 100)
} else {
this.succes = false
}
},
nosig() {
uni.showToast({
title: '到头了~',
icon: "none"
})
},
noxig() {
uni.showToast({
title: '没有更多了~',
icon: "none"
})
},
kt() { //快退
if (!this.list || this.list.length == 0) {
console.log('暂无音频数据~')
return;
}
let a = (this.currentTime - Math.floor(15 % 60)).toFixed(0) //当前时间-15秒
if (a < 1) {
this.succes = false
//#ifdef H5
this.$refs.myVideo.pause()
//#endif
//#ifndef H5
this.videoContext.pause()
//#endif
}
//#ifdef H5
this.$refs.myVideo.seek(a)
//#endif
//#ifndef H5
this.videoContext.seek(a)
//#endif
},
kj() { //快进
if (!this.list || this.list.length == 0) {
console.log('暂无音频数据~')
return;
}
let a = (this.currentTime + Math.floor(15 % 60)).toFixed(0) //当前时间+15秒
//#ifdef H5
this.$refs.myVideo.seek(a)
//#endif
//#ifndef H5
this.videoContext.seek(a)
//#endif
},
next(data) { //监听音频结束
this.succes = false
/*音频结束--是否自动播放下一首*/
if (!this.autoNext) {
return
}
if (this.num + 1 < this.list.length) {
this.succes = true
this.num += 1
this.recorPath = this.list[this.num].recorPath
setTimeout(() => {
//#ifdef H5
this.$refs.myVideo.play()
//#endif
//#ifndef H5
this.videoContext.play()
//#endif
}, 100)
} else {
this.jia = true //下按钮 - 灰且阻止
this.jian = false //上按钮 - 亮可点击
}
// console.log('音频结束-------')
},
playloading() { //加载框--封
if (this.loading) {
uni.showLoading({
title: "音频缓存中..."
})
this.loading = false
}
setTimeout(() => {
uni.hideLoading()
}, 1600)
},
},
watch: {}
}
//时间换算
function calcTimer(timer) {
if (timer === 0 || typeof timer !== 'number') {
return '00:00'
}
let mm = Math.floor(timer / 60)
let ss = Math.floor(timer % 60)
if (mm < 10) {
mm = '0' + mm
}
if (ss < 10) {
ss = '0' + ss
}
return mm + ':' + ss
}
</script>
<style lang="scss" scoped>
page {
background-color: #F6F6F8;
}
/* #video {
width: 100%;
} */
.audo-video {
padding-bottom: 20rpx;
color: #999;
}
.slider-box {
display: flex;
align-items: center;
justify-content: center;
font-size: 27rpx;
color: #999;
}
button {
display: inline-block;
width: 100rpx;
background-color: #fff;
font-size: 24rpx;
color: #000;
padding: 0;
}
.hidden {
position: fixed;
top: 0;
left: -10rpx;
z-index: -1;
width: 1rpx;
height: 1rpx;
}
.audo-top {
padding: 20rpx 40rpx;
display: flex;
justify-content: space-around;
align-items: center;
image {
width: 45rpx;
height: 45rpx;
}
}
.audo-a {
display: flex;
justify-content: space-between;
align-items: center;
width: 700rpx;
position: relative;
z-index: 9;
}
.beishu {
position: relative;
width: 100rpx;
padding-top: 5rpx;
padding-bottom: 5rpx;
text-align: center;
border-radius: 25rpx;
font-size: 28rpx;
}
.absolute {
position: absolute;
.beishu-a {
width: 200rpx;
border-radius: 20rpx;
text-align: center;
line-height: 90rpx;
background: #fff;
.title {
pdding-left: 30rpx;
}
}
}
</style>

85
uni_modules/cx-audio-play/package.json Normal file
View File

@@ -0,0 +1,85 @@
{
"id": "cx-audio-play",
"displayName": "音频播放组件，自定义修改",
"version": "2.0.1",
"description": "音频播放组件，兼容微信小程序、h5等，可倍数播放，快进快退，切换上下音频等",
"keywords": [
"音频",
"音频播放",
"播放器",
"倍数播放",
"播放"
],
"repository": "",
"engines": {
"HBuilderX": "^3.5.5"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": "",
"type": "component-vue"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "u"
},
"App": {
"app-vue": "y",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

13
uni_modules/cx-audio-play/readme.md Normal file
View File

@@ -0,0 +1,13 @@
### 组件各参说明 :
____
#### 1. 实现切换上下首、自动播放、倍数播放、快进快退、进度条播放等
#### 2. list 【Array】 音频数据/不传无法播放
#### 3. Seconds 【number】 快进快退秒数 - 默认15秒
#### 4. autoNext 【Boolean】 自动播放下一首 - 默认不开启
#### 5. autoplays 【Boolean】 进入页面是否自动播放 - 默认不开启
#### 6. slideYes 【Boolean】 拖动进度条时开启播放 - 默认不开启
#### 7. switAud 【Boolean】 切换上下音频开启播放 - 默认开启
#### 8. BsNav 【Array】 倍数数据
#### 本音频组件扩展性强，样式功能随意调整，兼容H5，微信小程序，App，建议下载示例项目，避免因图片缺失引起报错，谢谢支持~
#### 作者: chenxin ，微信交流: cxalq8-24
----