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();仅首次点击时这样处理即可，后续可以按照原来流程走。

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