播放器修改

components/uniapp-zaudio/index.scss

@@ -353,4 +353,119 @@
 	100% {
 		  transform: translate(-50%, -50%) rotateZ(360deg)
 	}
+}
+
+
+.middles {
+	position: relative;
+	width: 420rpx;
+	height: 1020rpx;
+	
+	.ms-close {
+		position: absolute;
+		bottom: 20rpx;
+		left: 20rpx;
+		width: 40rpx;
+		height: 40rpx;
+		
+		image {
+			width: 40rpx;
+			height: 40rpx;
+		}
+	}
+	
+	.audio-flex {
+		position: absolute;
+		top: 50%;
+		left: 65%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		align-items: center;
+		
+		.scroll-box {
+			width: 80rpx;
+			height: 800rpx;
+			display: flex;
+			justify-content: center;
+			
+			.slider-container {
+				position: relative;
+				width: 5rpx;
+				height: 100%;
+				background: #C0C0C0;
+				border-radius: 10rpx;
+				
+				.place-box {
+					width: 5rpx;
+					background: #2671E2;
+				}
+				
+				.slider-btn {
+					position: absolute;
+					left: -15rpx;
+					width: 30rpx;
+					height: 30rpx;
+					border-radius: 50%;
+					box-shadow: 0 0 10rpx #999;
+					background: #fff;
+				}
+			}
+		}
+	}
+	
+	.forwards {
+		position: absolute;
+		top: 50%;
+		left: 35%;
+		padding: 20rpx;
+		transform: translate(-50%, -50%) rotateZ(90deg);
+		width: 800rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		
+		.audio-control-wrapper {
+			display: flex;
+			align-items: center;
+		}
+		
+		.imt-audioss {
+			position: relative;
+			width: 100%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			
+			
+			.forward-item {
+				display: flex;
+				align-items: center;
+				
+				image {
+					width: 70rpx;
+					height: 70rpx;
+				}
+				
+				&.top {
+					margin: 0 60rpx;
+				}
+			}
+			
+			.audio-wrapper {
+				padding: 0 0;
+			}
+			
+			.audio-slider {
+				width: 100%;
+			}
+			
+			.node-class {
+				width: 100%;
+				color: #333;
+				display: flex;
+				justify-content: center;
+			}
+		}
+	}
 }

components/uniapp-zaudio/zaudio.vue

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