|
|
|
@@ -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/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="audio-wrapper"> |
|
|
|
<view class="audio-flex"> |
|
|
|
<text> |
|
|
|
@@ -29,6 +18,36 @@ |
|
|
|
</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> |
|
|
|
<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')" |
|
|
|
@@ -133,6 +152,66 @@ |
|
|
|
</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" style="margin-left: 0;"> |
|
|
|
<text v-if="!duration"> |
|
|
|
{{renderData('duration') || '00:00:00'}} |
|
|
|
</text> |
|
|
|
<text v-else>{{ duration || '00:00:00' }}</text> |
|
|
|
</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> |
|
|
|
|
|
|
|
@@ -160,7 +239,15 @@ |
|
|
|
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: {}, // 滚动对象 |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@@ -178,7 +265,9 @@ |
|
|
|
return this.playinfo[name]; |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$nextTick(() => { |
|
|
|
@@ -201,7 +290,50 @@ |
|
|
|
this.$zaudio.syncRender() |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
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; |
|
|
|
@@ -217,7 +349,7 @@ |
|
|
|
Math.floor(result % 60); |
|
|
|
return `${h}:${m}:${s}`; |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
//播放or暂停 |
|
|
|
operate() { |
|
|
|
this.$zaudio.operate(); |
|
|
|
@@ -230,6 +362,8 @@ |
|
|
|
}, |
|
|
|
//快进 |
|
|
|
stepPlay(value) { |
|
|
|
if (this.renderData('current') == '00:00:00') return |
|
|
|
console.log(this.renderData('current')) |
|
|
|
this.$zaudio.stepPlay(value); |
|
|
|
}, |
|
|
|
//切歌 |
|
|
|
@@ -244,6 +378,7 @@ |
|
|
|
let action = this.action; |
|
|
|
this.$zaudio.syncStateOff(action) |
|
|
|
this.$zaudio.stop() |
|
|
|
this.$zaudio.off('playing', '123') |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
@@ -381,8 +516,26 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.forward { |
|
|
|
padding: 0 20rpx 20rpx; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: flex-end; |
|
|
|
|
|
|
|
.forward-item { |
|
|
|
margin-right: 20rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
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; |
|
|
|
|
