瀏覽器(谷歌瀏覽器)網(wǎng)頁(yè)實(shí)現(xiàn)音頻(提示音)自動(dòng)播放
業(yè)務(wù)
實(shí)現(xiàn)html網(wǎng)頁(yè)播放提示音音頻；
如：告警消息推送食绿，同時(shí)播放提示音
原因
由于Google Chrome 于2018年1月起不再允許自動(dòng)播放內(nèi)容侈咕；只允許：
1.靜音的音頻；audio標(biāo)簽設(shè)置靜音屬性muted
2.有用戶行為發(fā)生時(shí)器紧，也就是用戶手動(dòng)觸發(fā)播放耀销；
解決
# 方法一;只針對(duì)谷歌瀏覽器
1.在搜索框搜查 "chrome://flags/"
2.找到 "Autoplay policy" 的默認(rèn)值 "Default" 修改成 "No user gesture is required"
# 方法二；通用(但不一定穩(wěn)定)
通過(guò)iframe標(biāo)簽實(shí)現(xiàn)音視頻文件自動(dòng)播放铲汪；如a.html 中內(nèi)嵌標(biāo)簽 <iframe src="b.html">
在 b.html中實(shí)現(xiàn)音頻自動(dòng)播放熊尉，即可
# 方法三；通用(但不一定穩(wěn)定)掌腰，比起方法二簡(jiǎn)單狰住，但是src的地址要求與方法二一致
<iframe allow="autoplay" src="http://data.huiyi8.com/2017/gha/03/17/1702.mp3"></iframe>
# 方法二與方法三的區(qū)別在于方法二引用b.html，且b.html中內(nèi)嵌音頻播放標(biāo)簽可控制齿梁，转晰，而方法三直接引用絕對(duì)路徑音頻文件，較簡(jiǎn)單
例子
注意：方法二與方法三士飒，src的地址收到限制且不穩(wěn)定：
1.引用的src必須是絕對(duì)地址，如http://127.0.0.1:8080/b.html
2.引用的src不能為localhost蔗崎，允許為127.0.0.1
3.當(dāng)前前引入的頁(yè)面域名酵幕，不可以和iframe的src域名相等，會(huì)出現(xiàn)不穩(wěn)定缓苛，時(shí)而不能播放
-
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> -
拓寬芳撒，獲取當(dāng)前訪問(wèn)地址
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");
