chrome浏览器音频自动播放（实现动态报警）

最新推荐文章于 2024-06-17 12:03:55 发布
最新推荐文章于 2024-06-17 12:03:55 发布
阅读量2k 收藏 2
点赞数
分类专栏： js 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MAYA_G/article/details/109024282
版权

项目需求：实时获取数据，出现异常数据时自动播放警报音频

将音频放 b.html页面

<audio th:src="@{/img/screen/baojing.mp3}" loop autoplay="autoplay" controls="controls" id="myaudio" preload>
    您的浏览器不支持 audio 标签。
</audio>

在需要音频播放的 a.html 以 iframe的形式引如 b.html

<iframe id="Iframe" allow="autoplay" src="127.0.0.0/b.html"></iframe>

ps：引入b页面时需注意src地址域名不能与a页面相同，可以使用ip地址或者其他域名
可以通过动态设置iframe的src地址来控制音频的播放与关闭，如：

//关闭音频
document.getElementById("Iframe").src=""
//开启音频
document.getElementById("Iframe").src="127.0.0.0/b.html"
MAYA_G
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
页面中添加声音提醒，并设置自动播放（谷歌浏览器已不支持自动播放）
技术改变生活
02-02 1619
使用h5的audio，支持三种格式，我用的mp3格式，在vue页面中写的，并设置了播放时自动放大，变红动作 1、html <i>是图标，变色和放大用的，audio是隐藏的，loop是循环播放，controls是有播放暂停， muted为静音播放，此操作为解决谷歌禁用自动播放 <i class="el-icon-bell admin-header-setting" :style="{'color':alarmColor,'transform':alarmScale}"></
使用谷歌浏览器的speechSynthesis的API，实现语音播报功能
卡洛背心的博客
10-30 2084
测试 实现效果： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <button onclick='playRadio()' id="played">播报语音</button> <button onclick='pauseRadi
Chrome 66之后禁止网页声音自动播放问题解决
ucsheep-You see sheep!
03-03 2200
1.问题描述 我们给客户做的一个网页大屏，有报警音效的功能，当用户触发报警条件时，在大屏播放报警音效。但是，由于谷歌浏览器在66版本后禁止网页声音自动播放，必须用户在与网页有交互之后才允许播放声音，否则当调用play方法播放音频时，会有如下错误： Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. 所以，用户起码要点击一下网页，才可以声音
chrome浏览器的自动播放策略
最新发布
2401_84001276的博客
06-17 265
根据Chrome浏览器的自动播放策略，自2018年4月起，Chrome实施了更严格的自动播放政策，以改善用户体验，减少安装广告拦截程序的动机，并在昂贵或受限网络上减少数据消耗。这些变化旨在让用户更好地控制播放，并使合法使用视频的发布者受益。媒体参与指数（MEI = Media Engagement Index）衡量个人在站点上消费媒体的倾向。Chrome的方法是每个来源的访问与重要媒体播放事件的比率：媒体（音频/视频）的消耗必须大于七秒；音频必须存在且未静音；包含视频的选项卡必须处于活动状态；视频的大小（以
JS 实现兼容浏览器报警提示声音
weixin_30608131的博客
10-27 1224
<!DOCTYPE HTML> <head> <title>JS实现报警提示音</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <script src="./jqu...
chrome中拖动滚动条时发出报警声
lengleng2008的专栏
10-28 1050
我遇到这个情况时，是开着有道词典的，并且划词功能是打开的。 在chrome里停用有道取词插件是没有用的，将有道中的划词功能关闭之后，报警声才消除。
Chrome自动播放问题原因以及解决方案
qq_38861938的博客
08-30 1191
属性为none，通过load()方法，重新加载数据源，然后通过loadeddata回调play()方法，使其加载完成后自动播放。2、在桌面设备上，用户的媒体参与度指数阈值已经超过，这意味着用户之前播放过有声视频。2、部分视频出现黑屏现象，点击重新播放无效，只能通过下载到本地的方式查看。1、用户已经与当前的域进行了交互（也就是click，tap事件）。顶部帧可以将自动播放权限委派给其iframe，来允许自动播放声音。1、能够自动播放部分视频，且播放正常。2、不设置自动播放并且设置。Chrome自动播放策略。
Chrome 中的自动播放策略&如何设置自动播放
热门推荐
qq_35052138的博客
09-09 2万+
Chrome 中的自动播放策略 为了改善用户体验，谷歌浏览器限制了音视频的自动播放，最大限度地减少广告骚扰，并减少数据消耗 Chrome 66 开始限制了 video 和 audio 元素的自动播放，从 Chrome 71 开始限制了 Web Audio API 的自动播放，因此一些网页游戏和webrtc相关的音视频项目都会相应收到影响 autoplay 虽然限制了自动播放，但是还有一些情况下是允许自动播放的 静音状态下始终允许自动播放 有声音自动播放时： 用户进行了页面点击等与界面发生交互行为
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
01-18
一、vue中解决chrome浏览器自动播放音频 需求 有新订单的时候，页面自动语音提示和弹出提示框； 问题 chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。严格地来说，是Chrome不允许在用户对...
automa 自动化工具 rpa chrome 浏览器自动化插件
09-20
automa 自动化工具 rpa chrome 浏览器自动化插件automa 自动化工具 rpa chrome 浏览器自动化插件automa 自动化工具 rpa chrome 浏览器自动化插件automa 自动化工具 rpa chrome 浏览器自动化插件automa 自动化工具 ...
Chrome浏览器如何关闭自动更新
02-15
Chrome 浏览器自动更新功能是通过任务计划和服务来实现的。任务计划是 Windows 操作系统中的一种机制，允许程序在特定时间或事件触发时执行特定的操作。在本例中，GoogleUpdateTaskMachineCore 和 ...
Chrome浏览器的自动保存密码提示功能禁用方法
09-22
Chrome浏览器的自动保存密码提示...通过动态改变输入框类型和正确设置`autocomplete`属性，可以在不降低用户体验的前提下，有效防止敏感密码信息被浏览器自动保存。这对于开发安全意识强烈的网站和应用程序尤其重要。
谷歌浏览器实现网页页面语音播报功能
xiaokuangren_的博客
08-07 303
【代码】谷歌浏览器实现网页页面语音播报功能。
html自动播放提示音,html播放提示音
weixin_39702400的博客
05-31 342
有两种分别用和标签,当用插入背景音乐时可以设置宽度和高度为0，隐藏播放器。■ ： 是用来插入背景音乐，但只适用于 ie，其参数设定不多。如下src="your.mid"设定 midi 档案及路径，可以是相对或绝对。autostart=true是否在音乐档下载完之后就自动播放。true 是，false 否 (内定值)。loop=infinite是否自动反复播放。loop=2 表示重复两次，infin...
前端视频无法自动播放的问题，基于Chrome浏览器的自动播放策略原理，详细解释加了autoplay属性之后视频仍然不能自动播放的问题，并提供了二种主流的解决方法
m0_64642443的博客
06-14 1万+
前端视频无法自动播放的问题，基于Chrome浏览器的自动播放策略原理，详细解释加了autoplay属性之后视频仍然不能自动播放的问题，并提供了二种主流的解决方法
html谷歌浏览器实现自动播报语音,vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法...
weixin_39580042的博客
06-03 939
一、vue中解决chrome浏览器自动播放音频需求有新订单的时候，页面自动语音提示和弹出提示框；问题chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。严格地来说，是Chrome不允许在用户对网页进行触发之前播放音频。不光是这样，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，使用js直接调用.play() 方法的话，chrome都...
播放语音，支持谷歌浏览器自动播放
weixin_30425949的博客
12-24 1240
１．最近的项目用到了语音播放的，调用的是百度语音合成语音的接口,接入后发现在谷歌浏览器会报错，其它浏览器可以正常播放。 ２．通过搜索了解到在Chrome 66以上的最新浏览器中，自动播放的视频要么是静音视频，要么就是没有声音的视频，或者是用户手动点击后播放的有声视频 ３．在HTML5中新增了 <video></video> <audio></audio...
html音乐自动播放代码在谷歌中不行,关于谷歌浏览器不支持html5中audio的autoplay解决方法（js代码解决）...
weixin_39841572的博客
06-04 1961
当我们直接写autoplay时，在chrome中浏览器并没有自动播放音频；如果直接通过js来调用audio的play()方法也不行；控制台还会报错大概意思：play()调用失败，因为用户没有与文档进行交互经过网上的查找：原博客：https://blog.csdn.net/baiding1123/article/details/104945759谷歌为优化用户体验关闭了audio中的autoplay...
[UE]pixelStreaming - Chrome浏览器无法自动播放音频视频的问题，Uncaught(in promise) DOMException
✍Snoring cat
07-20 1087
问题描述 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. 问题背景 现有 a.html 和 b.html 两个网页，通过点击a.html 中的按钮跳转到b.html，其中b.html 是pixelStreaming的像素流送前端显示界面。 在实际测试时，发现跳转到 b.html 后U...
vue中解决chrome浏览器自动播放音频
05-25
在Vue中解决Chrome浏览器自动播放音频的问题可以通过两种方法： 1. 使用Vue的生命周期函数mounted()来控制音频的播放。在mounted()函数中，通过JavaScript代码控制音频的播放，这样就避免了Chrome浏览器自动播放音频的问题。 2. 使用HTML5的autoplay属性来控制音频的播放。在Vue的模板中，可以使用autoplay属性来控制音频的自动播放。这种方法需要注意的是，Chrome浏览器会禁止自动播放音频，需要用户手动操作才能播放。 下面是两种方法的示例代码： 1. 使用mounted()函数控制音频播放 ```html <template> <div> <audio ref="audio" src="audio.mp3"></audio> </div> </template> <script> export default { mounted() { this.$refs.audio.play(); } } </script> ``` 2. 使用autoplay属性控制音频播放 ```html <template> <div> <audio src="audio.mp3" autoplay></audio> </div> </template> ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值