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

推荐订阅源

P
Proofpoint News Feed
C
CERT Recently Published Vulnerability Notes
O
OpenAI News
V
Vulnerabilities – Threatpost
C
Cybersecurity and Infrastructure Security Agency CISA
S
Schneier on Security
Latest news
Latest news
F
Full Disclosure
T
Tenable Blog
T
Troy Hunt's Blog
The Last Watchdog
The Last Watchdog
S
Secure Thoughts
L
LangChain Blog
有赞技术团队
有赞技术团队
Project Zero
Project Zero
Cloudbric
Cloudbric
爱范儿
爱范儿
GbyAI
GbyAI
C
CXSECURITY Database RSS Feed - CXSecurity.com
T
The Exploit Database - CXSecurity.com
S
Security @ Cisco Blogs
Hugging Face - Blog
Hugging Face - Blog
Recorded Future
Recorded Future
大猫的无限游戏
大猫的无限游戏
Last Week in AI
Last Week in AI
C
Cisco Blogs
WordPress大学
WordPress大学
Apple Machine Learning Research
Apple Machine Learning Research
小众软件
小众软件
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
V2EX - 技术
V2EX - 技术
Engineering at Meta
Engineering at Meta
Spread Privacy
Spread Privacy
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Hacker News: Ask HN
Hacker News: Ask HN
Recent Commits to openclaw:main
Recent Commits to openclaw:main
Schneier on Security
Schneier on Security
T
Threat Research - Cisco Blogs
M
MIT News - Artificial intelligence
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
K
Kaspersky official blog
The Hacker News
The Hacker News
V
V2EX
F
Fortinet All Blogs
L
LINUX DO - 最新话题
Cisco Talos Blog
Cisco Talos Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
N
News | PayPal Newsroom
博客园 - 三生石上(FineUI控件)
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org

博客园 - 进军的蜗牛

浏览器音频入门:录音生成 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