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

最新推荐文章于 2024-04-28 13:46:58 发布
最新推荐文章于 2024-04-28 13:46:58 发布
阅读量625 收藏
点赞数
文章标签： safari 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/taoshihan/article/details/129434832
版权

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

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

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

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

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

程序员老狼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
苹果浏览器 Safari(苹果浏览器) v5.34.57.2
12-15
Safari(苹果浏览器)是Apple发布较快Windows平台浏览器，根据Apple所说，针对Windows平台的Safari浏览器，Apple Safari(苹果浏览器)是目前在windows平台上速度较快的浏览器，业界标准iBech测试显示，
苹果浏览器微信底部返回栏显示/隐藏的问题
01-07
此段js代码完美解决 ; (function () { try { isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) if (fn.isIOS) { // window.history.pushState({}, title, #); document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
h5 audio音频文件流在ios中无法正常播放的大坑解决
热门推荐
qq_33593958的博客
01-15 1万+
1、通过文件流 2、循环多个audio标签来播放 3、android可以ios出现加载最后一点后闪退，文件损坏 4、android可以播放、ios能播放但是没有声音 以上是遇到的大坑之旅。。。下面就直接来为屌丝们来解决： var $audio = document.getElementById("audio"+index); var source = document.createEleme...
HTML5-audio
赳赳万里鲲
11-28 266
支持格式：OGG、MP3、WAV； 1. 自定义样式 思路：音频初始为隐藏；控件单独写；为自定义控件添加事件，对应的给Audio对象添加属性和方法。 注：下载控件：<a href="" download="638.wav"></a> 2.
【前端】谷歌浏览器 audio如何隐藏下载按钮
Hurpe
10-26 1103
当我们使用原生的audio标签时，可以看到如下的效果。 那么如何让下载按钮隐藏掉呢？ 1. controlsList=”nodownload” // 这个方法只支持 Chrome 58+， 低于该版本的是没有无法隐藏的 <audio src="/i/horse.ogg" controls="controls" controlsList="nodownload"> Your browser does not support the audio element. </audio&gt
Safari HTML5 Audio and Video Guide
10-17
If you embed audio or video in your website, you should use HTML5.
audio隐藏下载按钮
05-30 2133
// 这个方法只支持 Chrome 58+， 低于该版本的是没有无法隐藏的 <audio src="/i/horse.ogg" controls="controls" controlsList="nodownload"> Your browser does not support the audio element. </audio> co...
html禁止自动播放音乐代码,HTML Audio autoplay用法及代码示例
weixin_42386511的博客
05-31 1412
音频自动播放属性用于设置或返回音频是否应在加载后立即开始播放。它可以用来指定音频在加载后应立即自动开始播放。用法:返回自动播放属性：audioObject.autoplay设置自动播放属性：audioObject.autoplay = true|false属性值：true | false：它用于指定音频是否应在加载后立即自动开始播放。以下示例程序旨在说明音频自动播放属性：例：启用音频自动播放。Au...
ios Safari浏览器下audio音频播放延迟问题，自动播放失效问题
前端切图仔的日常
07-22 3299
问题背景 audio标签在chrome和Firefox浏览器下效果均正常，但是在Safari浏览器下，执行audio.play()方法后，音频会有延迟效果，迟钝一小段时间后才会播放，很影响用户体验。 问题原因 反正就是safari浏览器做了一些特殊限制，具体原因，请自行google。 解决方案 项目中引入howler.js import {Howl} from 'howler'; var sound = new Howl({ src: ["xxxx"] }); sound.play(); 再次在S
工作手记之ios safari禁止音频自动播放的解决方法
weixin_33895516的博客
12-20 1141
问题场景： 制作一个H5，需要微信打开后背景音乐或者其他音频文件进行播放，但是经常出现的结果是，安卓基本没有问题，但是苹果手机确不行，总是不进行播放，这是为什么呢？ 问题原因： 苹果为了用户着想，禁止了Autoplay和JS "onload" 加载播放。 User Control of Downloads Over Cellul...
iOS系统和微信中不支持audio自动播放问题的解决方法
08-29
最近在微信端开发H5的时候，audio标签在苹果机上无法进行自动播放，查找相关资料终于解决了，所以下面这篇文章主要给大家介绍了关于iOS系统和微信中不支持audio自动播放问题的解决方法，需要的朋友可以参考下。
解决手机浏览器点击后退页面刷新问题，兼容苹果 safari浏览器和安卓浏览器
04-03
解决手机浏览器点击后退页面刷新问题，兼容苹果 safari浏览器和安卓浏览器。 js的window.onbeforeunload，onunload，window.addEventListener(‘pagehide‘, () =＞ {}手机浏览器不生效
为了解决在safari浏览器video标签无法播放视频的问题
08-10
为了解决在safari浏览器video标签无法播放视频的问题
Dubbo应用可观测性升级指南与踩坑记录
三人三木的专栏
04-17 1226
应用从dubbo-3.1.*升级到dubbo-*:3.2.*最新稳定版本，提升应用的可观测性和度量数据准确性。 1. dubbo版本发布说明 2. 应用修改点 3. 踩过的坑
判断前端入参是否空否则提示前端写法
最新发布
qq_39306234的博客
04-28 232
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 520
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
2024 XYCTF Web 方向 wp 全解
qq_39947980的博客
04-27 986
XYCTF 2024 Web 方向全解
两个前端标签
ma_no_lo的博客
04-24 177
两个前端标签
前端Vue2项目搭建过程
xuemen11的博客
04-25 1219
vue2,vuex,vant组件库
微信小程序内嵌webview使用audio播放音频,苹果端锁屏后,音频会自动暂停播放
01-22
微信小程序内嵌webview使用audio标签播放音频时，苹果端在锁屏后，音频会自动暂停播放。这是苹果系统的特性，旨在节省电量和提高用户体验。 苹果设备上的锁屏功能会阻止所有后台应用程序的音频播放，包括小程序内嵌的webview。这意味着即使在小程序中通过audio标签播放音频，并且音频正在播放中，一旦设备锁屏，音频会自动停止播放。 这个特性是由苹果系统自己决定的，我们无法通过小程序的代码来修改或避免。为了提供更好的用户体验，我们需要在设计小程序时考虑到这一点，并向用户提供相关的提示。 一种常见的做法是，在小程序中播放音频时，提醒用户在锁屏前先暂停音频播放，以避免在锁屏后音频自动停止。我们可以通过在播放音频界面上显示相关提示，或者在音频播放界面上添加一个功能按钮，以便用户可以手动暂停播放。 此外，我们还可以通过使用小程序的语音识别功能来替代音频播放。通过语音识别，用户可以直接与小程序进行交互，从而避免了因为锁屏而导致音频播放停止的问题。 总结来说，微信小程序内嵌webview使用audio播放音频，在苹果端锁屏后会自动暂停播放。为提供更好的用户体验，可以在小程序中向用户提示在锁屏前暂停音频播放，并考虑使用其他替代方案，如语音识别。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值