JS 浏览器(谷歌浏览器)网页实现音频(提示音)自动播放
2020-12-27 本文已影响0人
五岁小孩
浏览器(谷歌浏览器)网页实现音频(提示音)自动播放
业务
实现html网页播放提示音音频；
如：告警消息推送，同时播放提示音
原因
由于Google Chrome 于2018年1月起不再允许自动播放内容；只允许：
1.静音的音频；audio标签设置静音属性muted
2.有用户行为发生时，也就是用户手动触发播放；
解决
# 方法一;只针对谷歌浏览器
1.在搜索框搜查 "chrome://flags/"
2.找到 "Autoplay policy" 的默认值 "Default" 修改成 "No user gesture is required"
# 方法二；通用(但不一定稳定)
通过iframe标签实现音视频文件自动播放；如a.html 中内嵌标签 <iframe src="b.html">
在 b.html中实现音频自动播放，即可
# 方法三；通用(但不一定稳定)，比起方法二简单，但是src的地址要求与方法二一致
<iframe allow="autoplay" src="http://data.huiyi8.com/2017/gha/03/17/1702.mp3"></iframe>
# 方法二与方法三的区别在于方法二引用b.html，且b.html中内嵌音频播放标签可控制，，而方法三直接引用绝对路径音频文件，较简单
例子
注意：方法二与方法三，src的地址收到限制且不稳定：
1.引用的src必须是绝对地址，如http://127.0.0.1:8080/b.html
2.引用的src不能为localhost，允许为127.0.0.1
3.当前前引入的页面域名，不可以和iframe的src域名相等，会出现不稳定，时而不能播放
-
a.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> //方法二 <iframe style="display: none;" allow="autoplay" src="http://localhost:8020/HelloHBuilder/b.html"> </iframe> //方法三 <iframe style="display: none;" allow="autoplay" src="http://localhost:8020/audio/alarm-audio.mp3"> </iframe> </body> </html> -
b.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <audio autoplay="autoplay" src="audio/alarm-audio.mp3" controls="controls" preload id="auto"> </audio> </body> </html> -
拓宽，获取当前访问地址
function getRootPath() { var strFullPath = window.document.location.href; var strPath = window.document.location.pathname; var pos = strFullPath.indexOf(strPath); var prePath = strFullPath.substring(0, pos); var postPath = strPath.substring(0, strPath.substr(1).indexOf('/') + 1); return (prePath); //return(prePath+postPath); } var serverRoot = getRootPath(); //将localhost替代为127.0.0.1 var reg = new RegExp("localhost","g");//g,表示全部替换。 serverRoot=serverRoot.replace(reg,"127.0.0.1");
