ios系统上h5页面点击播放audio标签声音有延迟问题处理

原文链接https://www.cnblogs.com/yalong/p/18214816

背景

app内嵌了一个H5页面，页面有个需求是点击某些按钮就触发声音，于是就使用了audio标签，但是有个问题就是在ios上，点击页面触发声音播放，声音会有短时间的延迟，然后才播放声音
找了好几种方案总算解决了

方案一

click事件改为mouseup事件
因为移动端存在click 的300毫秒延迟，所以如果用click事件的话就会导致声音播放必定是在300毫秒之后触发的

但是改成mouseup事件后，声音播放的时间是缩短了点，但是还是有延迟

方案二

audio进页面就直接播放，不过音量设置为0,相当于在后台一直静音播放，要触发播放的时候，把声音进度设置为0，音量设置为1，播放完再把声音设置为0
这种方案是个曲线救国的方案，虽然能解决，但是代码层面会麻烦，如果有多个音效的话，会比较耗性能

方案三

使用mouseup，同时 把audio 改为audioContext，完美解决
当然 audiContext 有兼容性问题，但是如果只是用来播放声音，没使用他的高级特性的话，兼容性一般是没问题的

audioContext 了解更多可以看这里:https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext