惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Vercel News
Vercel News
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Apple Machine Learning Research
Apple Machine Learning Research
T
Tailwind CSS Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
人人都是产品经理
人人都是产品经理
V
V2EX
量子位
Last Week in AI
Last Week in AI
Jina AI
Jina AI
博客园 - 【当耐特】
爱范儿
爱范儿
宝玉的分享
宝玉的分享
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Hugging Face - Blog
Hugging Face - Blog
博客园 - 三生石上(FineUI控件)
有赞技术团队
有赞技术团队
小众软件
小众软件
IT之家
IT之家
博客园_首页
博客园 - 聂微东
S
SegmentFault 最新的问题
阮一峰的网络日志
阮一峰的网络日志
博客园 - 叶小钗

博客园 - 进军的蜗牛

浏览器音频入门:录音生成 PCM、单声道/立体声、采样率、转 MP3 Web 语音场景下多路麦克风采集与音量异常:成因与两种工程取舍 从一次权限错误,彻底搞懂Mac权限管理那些事 js实现svga编辑器 Chrome浏览器普通模式访问页面报错 ERR_CONNECTION_REFUSED 问题排查 Web语音聊天室中录音无声问题分析与解决方案 蓝湖SVG上传Iconfont阿里图标库部分元素缺失问题分析与解决方案 前端测试新体验:Cypress让UI测试变得如此简单 iOS H5页面高度闪烁问题与100vh兼容性详解 为什么录音生成的音频文件有时长但没声音?—— 一次音频采集问题的排查与解决 前端实现采集图片某个区域的颜色色值 浏览器多Tab间通信方法全面总结:从WebView需求出发的技术方案 pcm文件转为mp3并播放 github https方式 push无法提交代码的处理方法 前端如何计算js代码执行时长 基于swiper和animate.css的全屏H5动效和花瓣飘落效果 混合开发H5页面的数字字体在IOS 安卓上显示不一样 node基于自签名证书搭建https服务 基于svelte webpack开发umd格式的npm包 CSS运动路径offset-path之path的语法解析
ios系统上h5页面点击播放audio标签声音有延迟问题处理
进军的蜗牛 · 2024-05-28 · via 博客园 - 进军的蜗牛

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

背景

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

方案一

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

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

方案二

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

方案三

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

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