uniapp自定义audio样式

<template>
	<view class="audo-video">
		<video id="myVideo" :src="url" class="hidden" @timeupdate="timeupdate" ref="video"
			@loadedmetadata="loadedmetadata"></video>
		<view class="play">
			<view class="play-left">
				<image src="../../static/暂停.png" v-show="playshow" @tap="play"></image>
				<image src="../../static/开始.png" v-show="stipshow" @tap="stop"></image>
				<text>{
   
   {timer}}</text>
			</view>
			<view class="play-right">
				<slider @change="sliderChange" @changing="sliderChanging" class="slider" block-size="16" :min="0"
					:max="duration" :value="currentTime" activeColor="#595959" @touchstart="lock= true"
					@touchend="lock = false" />
			</view>
			<text class="overTimer">{
   
   {overTimer}}</text>
		</view>

	</view>
</template>

<script>
	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
	}
	export default {
		props: {
			url: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				playshow: true, //播放的图片
				stipshow: false, //暂停的图片
				lock: false, // 锁
				status: 1, // 1暂停 2播放
				currentTime: 0, //当前进度
				duration: 100, // 总进度
				videoContext: '',
			}
		},
		created() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		computed: {
			timer() {

				return calcTimer(this.currentTime)
			},
			overTimer() {

				return calcTimer(this.duration)
			}
		},
		methods: {

			// 播放
			play() {
				this.stipshow = true;
				this.playshow = false;
				this.status = 2;
				this.videoContext.play();
			},
			// 暂停
			stop() {
				this.stipshow = false;
				this.playshow = true;
				this.videoContext.pause()
				this.status = 1
			},
			// 更新进度条
			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
				if (this.duration == this.currentTime) {
					this.stipshow = false;
					this.playshow = true;
				}
			},

			// 拖动进度条
			sliderChange(data) {
				this.videoContext.seek(data.detail.value)
			},

			//拖动中
			sliderChanging(data) {
				this.currentTime = data.detail.value
			},

			// 视频加载完成
			loadedmetadata(data) {
				this.duration = data.detail.duration
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/.uni-slider-handle-wrapper {
		background: #ccc !important;
	}

	/deep/.uni-slider-track {
		background: #44b6fd !important;
	}

	/deep/.uni-slider-thumb {
		border: 1px solid #44b6fd !important;
		background: #fff !important;
	}

	.play {
		height: 124rpx;
		position: relative;
		border-radius: 38px;
		display: flex;
		align-items: center;
	}

	.play-left {
		display: flex;
		align-items: center;
		height: 124rpx;
	}

	.play-left text {
		color: black;
		font-size: 13px;
	}

	.slider {
		width: 336upx;
		color: black;
		margin: 0 !important;
	}

	.musions {
		width: 26px;
		height: 26px;
	}

	.play image {
		width: 25px;
		height: 25px;
		margin-right: 16px;
	}

	.play-right {
		width: 168px;
		height: 124rpx;
		position: relative;
		display: flex;
		align-items: center;
		margin-left: 40rpx;
	}

	.audo-video {
		width: 100%;
		position: relative;
	}

	.slider-box {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26upx;
		color: #999;
	}

	button {
		display: inline-block;
		width: 100upx;
		color: #fff;
		font-size: 24upx;
		padding: 0;
	}

	.hidden {
		position: fixed;
		z-index: -1;
		width: 1upx;
		height: 1upx;
	}

	.overTimer {
		font-size: 13px;
		color: black;
		margin-left: 16px;
	}
</style>