Telegram Channel
Laisky's Notes
17:21 · 2024年6月27日 · 周四
学会一个前端的坑。
我想在浏览器里做一个语音对话,用户说一句,然后浏览器采集声音,发给后端,接收到 wav 格式的音频响应,播放出来。
很简单的需求,通过鞭挞 AI 十分钟就写完了。但是实际调试的时候发现,PC 上很好没问题,ios 上无论是 Chrome 还是 Safari 都磕磕碰碰的很难用。
经过一番摸索,基本上确认了两个坑:
1. 手机触屏上,响应长按事件,不会触发
mousedown/mouseup
事件,而是要绑定
touchstart/touchend
事件。
2. 手机对音频的权限管理极为苛刻,原则上禁止 js 自动播放音频,必须是用户手动触发。
尤其是第二条,严格地说,每一个音频,都需要以 audio HTML element 的形式显示到页面上,然后由用户亲自按下播放键才能播放。无论是你代为点击,还是使用 autoplay 都是不行的,否则就只会有一个大写的 ERROR。但这个也没那么绝对,交互过一次后,下一次再用就可以自动播放了,感觉有一点玄学。
有专业的朋友也欢迎帮忙指点一下。 #FE
Home
Powered by
BroadcastChannel
&
Sepia
Telegram Channel