577 lines
14 KiB
Vue
577 lines
14 KiB
Vue
<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>
|