原文链接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