【问题记录】audio标签变更currentTime属性值无效,currentTime变为0

在使用audio播放音频中,需要拖动进度条,来使音频可以快进,单纯的使用currentTimes改变属性值,是不会生效的。

audio.currentTimes = 100   //这样改变不会生效

可以使用audio中的seekable 属性,来设置音频中可寻址(移动播放位置)的时间范围。该属性可以寻址到音频的中的任何位置,即使该音频没有完成缓冲。

		//点击进度条更新进度
		clickProgress(e) {
			// this.audio.pause()
			if ('seekable' in this.audio) {
				console.log(this.audio.seekable.start(0))
				console.log(this.audio.seekable.end(0))
				// let start = this.audio.seekable.start(0)
				// let end = this.audio.seekable.end(0)
			} else {
				this.$message.waring("你的浏览器不支持该功能!")
				return 
			}
			//如果不是正在移动 和 没有暂停播放就执行
			if (!this.isMoveIn || !this.audio.paused) {
				this.updateProgress(e.offsetX)
				this.$refs.cd.classList.add('rotate')
				if (this.$refs.cd.classList.contains('rotatePause')) this.$refs.cd.classList.remove('rotatePause')
			}
		},

console.log(this.audio.seekable.start(0))
console.log(this.audio.seekable.end(0))

项目中使用console 输出的该值,如果在此处只是调用的话并不会生效。项目中对这俩值又没有太多需求,暂时只能这样做了,有好的解决方法的,欢迎大佬指出。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值