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

推荐订阅源

让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
U
Unit 42
IT之家
IT之家
Y
Y Combinator Blog
T
Tailwind CSS Blog
B
Blog
大猫的无限游戏
大猫的无限游戏
博客园 - 叶小钗
Jina AI
Jina AI
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
I
InfoQ
J
Java Code Geeks
F
Fortinet All Blogs
T
The Blog of Author Tim Ferriss
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
H
Hackread – Cybersecurity News, Data Breaches, AI and More
人人都是产品经理
人人都是产品经理
腾讯CDC
Hugging Face - Blog
Hugging Face - Blog
GbyAI
GbyAI
博客园 - 司徒正美
The GitHub Blog
The GitHub Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
L
LangChain Blog

博客园 - 进军的蜗牛

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