2023年6月21日发(作者：)

audio⾃动播放完美兼容实现⽅案前述：最近解决的⼀个疑难杂症，是关于audio⾃动播放与监听audio加载完成在ios上的兼容性问题，其表现为pc，安卓⾕歌浏览器正常，ios微信，⾕歌浏览器不正常。需求：在⾳频加载前放置⼀个全局loading，⾳频加载完成后取消loading，并⾃动播放；项⽬为vue前端项⽬，兼容pc，移动端。解决⽅案1（失败）：

imer=setTimeout(function(){ oading = that.$loading({ lock: true, text: '⾳频加载中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); },200); //兼容⾕歌浏览器 ntListener("progress", function() { //关闭loading并让() }); ntListener("canplay", function() { //关闭loading并让() }); //兼容微信浏览器 ntListener("WeixinJSBridgeReady", function () { alert("微信") //关闭loading并让() }, false)问题在于addEventListener("canplay"）与（“progress”）在ios微信浏览器不兼容，⽽在微信浏览器上类似上述的兼容微信浏览器代码根本难以实现，并且兼容这些浏览器需要写很多重复的代码，复⽤性不⾼；解决⽅案2（成功）：

思路，⽤全局⾃定义⽅法get请求替换监听⾳频加载是否完成⽅案；第⼀步，封装axios get⽅法import axios from 'axios'import { Loading } from 'element-ui'const get = function(path, callback){ //配置路径 let fainalPath = path; if(f("http") < 0){ fainalPath = "" + Host + path; } //延时Loading let getloadtimer = null; let getloading = null; getloadtimer = setTimeout(function(){ getloading = e({ lock: true, text: '资源加载中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); },200); //⽹络不稳定Loading let setIntvar = null; let setIntvarnum = 0; let netLoading = null; setIntvar = setInterval(function(){ if(setIntvarnum>=10){ if(getloading != null) { (); } netLoading = e({ lock: true, text: '⽹络环境不稳定，请您刷新或者重新登录...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); }else { setIntvarnum += 1 } },1000); //⽹络请求 (fainalPath ,{headers: { 'Content-Type':'application/json;charset=UTF-8', 'Accept':'application/json' }}) .then(function (response) { closeAll(getloadtimer,setIntvar,getloading,netLoading); callback(response) }) .catch(function (error) { closeAll(getloadtimer,setIntvar,getloading,netLoading); if (se) { (); (); tipError(,,path) } })};第⼆步：在vue页⾯中，监听数据变幻，并加载⾳频；watch: { 'response': 'renderData' }response是⽗组件传来的数据；renderData是⼦组件的数据初始化⽅法；在renderData⾥做下⾯的⽅法。let audioSrc = "/测试.mp3"; let audioElement = mentById('playButton'); (audioSrc,function(response){ //(); (); })第三步：当你点击⾳频时不需要重复加载，它会从cache⾥去拿；choiceAudio (id) { d = 'pause'; let audioSrc = "http:/xxxx"+ id +".mp3"; mentById('playButton').setAttribute('src', audioSrc); mentById('playButton').load(); mentById('playButton').play();},总结：经过⽅案⼆，在pc，安卓，ios⾥都能正常运⾏，完美!

2023年6月21日发(作者：)

audio⾃动播放完美兼容实现⽅案前述：最近解决的⼀个疑难杂症，是关于audio⾃动播放与监听audio加载完成在ios上的兼容性问题，其表现为pc，安卓⾕歌浏览器正常，ios微信，⾕歌浏览器不正常。需求：在⾳频加载前放置⼀个全局loading，⾳频加载完成后取消loading，并⾃动播放；项⽬为vue前端项⽬，兼容pc，移动端。解决⽅案1（失败）：

imer=setTimeout(function(){ oading = that.$loading({ lock: true, text: '⾳频加载中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); },200); //兼容⾕歌浏览器 ntListener("progress", function() { //关闭loading并让() }); ntListener("canplay", function() { //关闭loading并让() }); //兼容微信浏览器 ntListener("WeixinJSBridgeReady", function () { alert("微信") //关闭loading并让() }, false)问题在于addEventListener("canplay"）与（“progress”）在ios微信浏览器不兼容，⽽在微信浏览器上类似上述的兼容微信浏览器代码根本难以实现，并且兼容这些浏览器需要写很多重复的代码，复⽤性不⾼；解决⽅案2（成功）：

思路，⽤全局⾃定义⽅法get请求替换监听⾳频加载是否完成⽅案；第⼀步，封装axios get⽅法import axios from 'axios'import { Loading } from 'element-ui'const get = function(path, callback){ //配置路径 let fainalPath = path; if(f("http") < 0){ fainalPath = "" + Host + path; } //延时Loading let getloadtimer = null; let getloading = null; getloadtimer = setTimeout(function(){ getloading = e({ lock: true, text: '资源加载中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); },200); //⽹络不稳定Loading let setIntvar = null; let setIntvarnum = 0; let netLoading = null; setIntvar = setInterval(function(){ if(setIntvarnum>=10){ if(getloading != null) { (); } netLoading = e({ lock: true, text: '⽹络环境不稳定，请您刷新或者重新登录...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); }else { setIntvarnum += 1 } },1000); //⽹络请求 (fainalPath ,{headers: { 'Content-Type':'application/json;charset=UTF-8', 'Accept':'application/json' }}) .then(function (response) { closeAll(getloadtimer,setIntvar,getloading,netLoading); callback(response) }) .catch(function (error) { closeAll(getloadtimer,setIntvar,getloading,netLoading); if (se) { (); (); tipError(,,path) } })};第⼆步：在vue页⾯中，监听数据变幻，并加载⾳频；watch: { 'response': 'renderData' }response是⽗组件传来的数据；renderData是⼦组件的数据初始化⽅法；在renderData⾥做下⾯的⽅法。let audioSrc = "/测试.mp3"; let audioElement = mentById('playButton'); (audioSrc,function(response){ //(); (); })第三步：当你点击⾳频时不需要重复加载，它会从cache⾥去拿；choiceAudio (id) { d = 'pause'; let audioSrc = "http:/xxxx"+ id +".mp3"; mentById('playButton').setAttribute('src', audioSrc); mentById('playButton').load(); mentById('playButton').play();},总结：经过⽅案⼆，在pc，安卓，ios⾥都能正常运⾏，完美!