jquery audio在微信或者客户端需要点击两次才能正常播放的问题解决方案

这里不处理音频自动播放问题。

先说明一下问题场景:

默认audio的source的src为空,通过点击事件触发ajax方法通过后台获取音频地址然后播放,发现音频无法正常播放,再次点击时才能播放。

这里解释一下点击事件流程,若当前audio的音频src为空,则调用ajax获取音频地址,动态改变audio的src,然后调用play()方法播放音频,如果当前audio音频地址不为空,则处理音频的播放或者暂停操作。

导致的结果是,第一次点击时,通过后台获取到音频地址,然后播放音频时,不能正常播放,此时audio音频是有正确值的。再次点击时,不经过ajax方法,直接处理音频的播放/暂停,此时音频可以正常播放。

 

说明原因之前,先说明一下h5页面是默认屏蔽audio自动播放方法的,必须要用户手动点击触发才能播放,这个请自行百度。出现上述情况的原因是,h5页面认为通过ajax调用的audio.play()方法不是用户手动触发,所以就给屏蔽了,使之不能正常播放,但是音频地址会正常改变。

我的解决方式是,先给audio默认一个空白的音频地址,没有声音的音频,1s左右就够了,在调用ajax时,audio.play();audio.paused();仅首次点击时这样处理即可,后续可以按照原来流程走。

这样,连续点击两次才能播放的问题就解决了。

发布了27 篇原创文章 · 获赞 1 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/dragon974539495/article/details/93720103
今日推荐