解决苹果Safari 浏览器下audio隐藏不自动播放-实时语音通话功能【唯一客服】

如果我们想隐藏默认的audio控件，但是仍然想自动播放声音

当 audio 元素设置为 display: none 或 visibility: hidden 时，音频仍然会被加载，但是无法自动播放

这是因为在这种情况下，浏览器会将音频元素标记为“不可见”，从而禁止自动播放

 

可以使用 opacity 属性或 position: absolute; left: -9999px; 等方式进行样式处理，而不是使用 display: none 或 visibility: hidden。

这样可以确保音频元素被正确加载，并且可以自动播放

 

posted @   唯一客服系统开发笔记  阅读(212)  评论(0)  编辑  收藏  举报
相关博文：
· 解决苹果Safari 浏览器下html不能自动播放声音和视频的问题-实时语音通话功能【唯一客服】
· [uniapp] GOFLY在线客服系统- uniapp增加播放背景音效或者按钮音效
· [css] 如何隐藏没有静音、自动播放的音视频？
· [css] 如何隐藏没有静音、自动播放的音视频？
· [css] 如何隐藏没有静音、自动播放的音视频？
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
历史上的今天：
2021-03-09 [Go]Golang中控制并发的sync包
2021-03-09 [日常]GB2312 GBK GB18030的区别和演进过程
2020-03-09 [PHP] fastcgi_split_path_info与传递PATH_INFO
2019-03-09 [MySQL] explain中的using where和using index
2019-03-09 [Linux] awk基础编程
2018-03-09 [日常] crontab的秒执行和串行化和多进程实现
2016-03-09 [nodejs] nodejs开发个人博客（四）数据模型
点击右上角即可分享
微信分享提示
AI IDE Trae
1
chat with us