audio自动播放完美兼容实现方案

痛定思痛。 2022-02-24 06:18 827阅读 0赞

前述：最近解决的一个疑难杂症，是关于audio自动播放与监听audio加载完成在ios上的兼容性问题，其表现为pc，安卓谷歌浏览器正常，ios微信，谷歌浏览器不正常。

需求：在音频加载前放置一个全局loading，音频加载完成后取消loading，并自动播放；项目为vue前端项目，兼容pc，移动端。

解决方案1（失败）：

that.audioTimer=setTimeout(function(){
       that.audioLoading = that.$loading({
                lock: true,
                text: '音频加载中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              });
            },200);
            //兼容谷歌浏览器
            audioElement.addEventListener("progress", function() {
              //关闭loading并让audio.paly()
            });
            audioElement.addEventListener("canplay", function() {
              //关闭loading并让audio.paly()
            });
            //兼容微信浏览器
            document.addEventListener("WeixinJSBridgeReady", function () {
              alert("微信")
              //关闭loading并让audio.paly()
            }, 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(path.indexOf("http") < 0){
        fainalPath = "http://" + Host + path;
      }
    
      //延时Loading
      let getloadtimer = null;
      let getloading = null;
      getloadtimer = setTimeout(function(){
        getloading = Loading.service({
          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) {
            getloading.close();
          }
          netLoading = Loading.service({
            lock: true,
            text: '网络环境不稳定，请您刷新或者重新登录...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
        }else {
          setIntvarnum += 1
        }
      },1000);
      //网络请求
      axios.get(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 (error.response) {
            console.log(error.response.data);
            console.log(error.response.status);
            tipError(error.response.data.code,error.response.status,path)
          }
        })
    };

第二步：在vue页面中，监听数据变幻，并加载音频；

watch: {
          'response': 'renderData'
        }

response是父组件传来的数据；renderData是子组件的数据初始化方法；在renderData里做下面的方法。

let audioSrc = "http://xxxx.com/测试.mp3";
              let audioElement = document.getElementById('playButton');
              api.get(audioSrc,function(response){
                //audioElement.load();
                audioElement.play();
              })

第三步：当你点击音频时不需要重复加载，它会从cache里去拿；

choiceAudio (id) {
      this.isEnded = 'pause';
      let audioSrc = "http:/xxxx"+ id +".mp3";
      document.getElementById('playButton').setAttribute('src', audioSrc);
      document.getElementById('playButton').load();
      document.getElementById('playButton').play();
    },

总结：经过方案二，在pc，安卓，ios里都能正常运行，完美!