关于audio标签的currenttime值修改失败问题

237 阅读2分钟

这是我发布的第一篇文章,希望能给到读者一点帮助。

事情是这样

我在制作一个通过监听键盘敲击事件,来控制一个audio组件的播放,类似于击鼓的效果。

​编辑

功能正常,但是我发现了一个问题!

就是在当我连续敲击的时候,组件并不是连续的播放,原因可能是因为,在我敲击播放第一次之后的再次敲击时,此时的audio组件正处在播放状态中,所以没有达到连续播放的效果。

于是我将audio.currentTime设为0,(图中设为-1,直接无视就好了,当时纯属急病乱投医)。理论上可行,但是实际上并没有任何变化,在我一番调试后发现,currentTime这个属性并不存在!?

于是我到各大网站和论坛搜索了一番,

 解决办法一!!!!!

终于得到了答案,一位大佬的回答给了我灵感,大概意思是说要在触发之前先预载这个audio,

预载?原谅我这个小白并不懂什么事预载,但是我也按照大佬的办法去修改了一下代码。

​编辑

在组件的内部加上这条,大概意思就是说在浏览器运行这个页面之前,会先预加载着几个组件,这样浏览器就知晓了这几个组件的存在,也就解决了currenttime属性不存在的问题(纯属个人理解,如有不恰当的地方,求指正)。

但是当我再次运行之后,依旧没有解决问题。依旧是属性不存在,我也怀疑过是我浏览器的问题,但是safari?

我又开始在各大论坛上找,最终找到了一个看似不太行的办法,抱着试试看的心态。

解决办法二!!!!

​编辑

在调用currenttime之前先执行了这样一行代码,最终问题被稀里糊涂的解决了,成功的实现了连续的击鼓。

但是​编辑

如果敲击速度特别快的话,(就是特别特别快的那种快)他就会出这样的错误,但是并不会影响后续的执行。

我也并不太理解其中的原理,希望能给一些陷入困境的人一点点参考,也希望路过的各位大佬能指点一下。