以下代码可能过长，请耐心查阅
前言
最近项目中有播放背景声音的一个功能，后面发现刷新浏览器后，不对页面进行任何点击操作，浏览器不播放声音。作为一个后端开发，突然搞这么一个前端解决方案是有点懵逼的，下面是和一名前端大佬讨论的结果。
解决方案：- 1.将提供给用户的浏览器的播放声音权限打开，然后重新打包浏览器发出去；
- 2.给用户一个弹窗提示，点击按钮，打开浏览器声音权限或直接跳转到设置声音的页面；（经过测试发现实现不了，因为系统部署在服务端，而打开的是本地浏览器的配置，无法实现这个功能）
- 3.置顶一个弹窗，引导用户开启声音权限，达到一劳永逸的效果。（目前博主采用）
ps：上面所说的弹窗是在浏览器刷新后，并且检测到浏览器没有开启声音的时才会弹窗。
已测试过的浏览器类型和版本：以下浏览器做过声音测试和引导弹窗测试
- 谷歌浏览器（版本83.0.4103.97、72.0.3626.96、65.0.3325.146）
- 火狐浏览器（版本76.0.1 ）
- IE浏览器（版本11.836.18362.0）
- Opera浏览器（版本68.0.3618.165）
谷歌66版本以下都支持播放，66版本以上默认拦截声音播放；IE支持声音播放，不会有提示框
静音文件和图标这里用静音的文件去测试浏览器是否可以正常播放，图标是浏览器的图标截图，大家自己随意取
- 链接：https://pan.baidu.com/s/1H-lrgdBtf4LamOXWfP8vbg
- 提取码：bqxv
- 1.embed
- 2.audio
这里需要判断IE浏览器版本是否是大于9版本，如果大于9则用 embed 标签，其他浏览器和IE版本用 audio 标签。下面是IE浏览器的处理方式
//兼容ie告警声音处理
if(ieVersion()>9){
this.sourceShow = true
}else{
this.sourceShow = false
}
//在app.vue导入
import {ieVersion} from "./utils/ieVersion";
/***
* 判断当前浏览器是否是ie
* @returns {Number}
* -1代表不是ie浏览器 其他数字代表各个ie浏览器的版本
*/
export function ieVersion(){
let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
let isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE -1 && !isIE; //判断是否IE的Edge浏览器
let isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if(isIE) {
let reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
let fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion == 7) {
return 7;
} else if(fIEVersion == 8) {
return 8;
} else if(fIEVersion == 9) {
return 9;
} else if(fIEVersion == 10) {
return 10;
} else {
return 6;//IE版本{
this.browserInfo = info;
});
},
// 检测声音能否播放
async checkAutoPlayFun(){
// 检测当前流量器是否能自动播放背景声音
let autoplay = await checkAutoPlay();
if(autoplay === false){
this.dialogVisible = true;
}
},
},
created(){
},
mounted() {
const that = this;
// 监听浏览器刷新事件，用户为登录状态，且不在登录页时才弹出提示
let fullPath = that.$router.currentRoute.fullPath;
if(that.$store.getters.isLogin === 'true' || that.$store.getters.isLogin === true){
if(fullPath !== '/' && fullPath !== '/login'){
that.getBrowserInfoFun();
that.checkAutoPlayFun();
}
}
}
}
.voiceTips{
margin-top: 93px;
z-index: 9999!important;
}
/**
* 获取浏览器类型和版本号
*/
export function getBrowserInfo (){
const agent = navigator.userAgent.toLowerCase();
const regStr_ie = /msie [\d.]+;/gi ;
const regStr_ff = /firefox\/[\d.]+/gi
const regStr_chrome = /chrome\/[\d.]+/gi ;
const regStr_saf = /safari\/[\d.]+/gi ;
const regStr_opera = /opr\/[\d.]+/gi ;
//ie
if (agent.indexOf("msie") >= 0) {
const ver= agent.match(regStr_ie)[0];
return {type:"IE",version:ver.replace(/[^0-9.]/ig,"")};
}
//firefox
else if (agent.indexOf("firefox") >= 0) {
const ver=agent.match(regStr_ff)[0];
return {type:"Firefox",version:ver.replace(/[^0-9.]/ig,"")};
}
//Opera
else if(agent.indexOf("opr") >= 0){
const ver=agent.match(regStr_opera)[0];
return {type:"Opera",version:ver.replace(/[^0-9.]/ig,"")};
}
//Chrome
else if(agent.indexOf("chrome") >= 0){
const ver=agent.match(regStr_chrome)[0];
return {type:"Chrome",version:ver.replace(/[^0-9.]/ig,"")};
}
//Safari
else if(agent.indexOf("Safari") >= 0){
const ver=agent.match(regStr_saf)[0];
return {type:"Safari",version:ver.replace(/[^0-9.]/ig,"")};
}
}
/**
* 检测浏览器是否支持自动播放！
* return @Promise boolean
*/
export function checkAutoPlay(){
// 返回一个promise以告诉调用者检测结果
return new Promise(resolve => {
const audio = document.createElement('audio');
// require一个本地文件，会变成base64格式，这里用的是没有声音的文件进行检测的
audio.src = require('@/voice/mute.wav');
document.body.appendChild(audio);
let autoplay = true;
// play返回的是一个promise
// audio.volume = 0;
audio.play().then(() => {
// 支持自动播放
autoplay = true;
}).catch(() => {
// 不支持自动播放
autoplay = false;
}).finally(() => {
audio.remove();
// 告诉调用者结果
resolve(autoplay);
});
});
}
参考网址：https://juejin.im/post/5af7129bf265da0b8262df4c.
