vue控制audio播放与暂停，显示时长，进度控制

<audio  src="@/assets/1291007551.mp3"
			@timeupdate="getCurr"
			@pause="is_stop=true"
			@play="is_stop=false"
			autoplay="autoplay"
			
			ref="audio"
			
			@canplay="showLong"
			></audio>
//下面是进度条，主要需要一个事件=》changeLong
<van-slider v-model="progress" active-color="#ee0a24" @change="changeLong">
						<template #button>
							<div class="custom-button"></div>
						</template>
					</van-slider>

　　methods中

		toTime(sec) { //秒数转化为mm:ss形式
				let s = sec % 60 < 10 ? ('0' + sec % 60) : sec % 60
				let min = Math.floor(sec / 60) < 10 ? ('0' + Math.floor(sec / 60)) : Math.floor(sec / 60)
				return min + ':' + s
			},
			getCurr() { //音频进度改变时触发

				this.curr = parseInt(this.$refs.audio.currentTime)

				this.progress = this.curr / this.duration * 100
			},
			showLong() { //音频加载成功后获取时长
				this.duration = parseInt(this.$refs.audio.duration)


			},
			changeLong() { //改变进度
				let ct = this.progress * this.duration / 100
				if (!isNaN(ct)) {
					this.$refs.audio.currentTime = ct
				}

				console.log(this.progress)
			},
			plays() { //播放暂停控制

				if (this.is_stop) {
					this.$refs.audio.play()
				} else {
					this.$refs.audio.pause()
				}
				// this.is_stop=!this.is_stop

			}

　　data中

progress: 0,
				is_stop: true,
				duration: 0,
				curr: 0

　　其它

<div class="time">
						<span>{{toTime(curr)}}</span>
						<span>{{toTime(duration)}}</span>
					</div>
					<div class="ctol">
						<div class="prev"></div>
						<div :class="is_stop?'noplay':'play'" @click="plays"></div>
						<div class="next"></div>
					</div>