vue项目h5的音视频播放ios安卓适配

vue项目中我只引入了原生的audio标签使用了play()方法,ios端不能自动播放

data中放入:isopenimg: true, // 音乐

解决适配:

audio标签
<audio id="panmuc"
       :src="'https://cpicaicdn.abtpt.cn/bxhd/zqdt2023/share/zqdt.mp3'"
       loop
       ref="audio"></audio>

<div id="music" class="Music">
开始按钮
    <img class="openimg"
         src="https://cpicaicdn.abtpt.cn/bxhd/zqdt2023/page/openaudio.png"
         v-show="isopenimg"
         @click="Openimg"
         lt="">
关闭按钮
    <img class="closeimg"
         src="https://cpicaicdn.abtpt.cn/bxhd/zqdt2023/page/closeaudio.png"
         v-show="!isopenimg"
         @click="Openimg"
         alt="">
</div>

audio便签src里面的是音频链接

img是音乐图片和关闭音乐图片,mounted对音乐做监听处理

mounted(){
     this.PlayMusic()  //播放
    //关闭
    cument.addEventListener('visibilitychange', () => {
      //检测页面是否不可见
      if (document.hidden) {  
        console.log('hidden')
        let audio = document.getElementById('panmuc')
        audio.pause()  //暂停音频播放
        if (this.audioBufferSourceNode_1) {
          this.audioBufferSourceNode_1.stop()
        }
      } else {
        // 此处填写H5监听到关闭小程序的操作，比如wx.closeWindow();
        console.log('监听到关闭小程序')
        let audio = document.getElementById('panmuc')
        this.isopenimg = false
        audio.pause()  //暂停音频播放
        if (this.audioBufferSourceNode_1) {
          this.audioBufferSourceNode_1.stop()
        }
        // this.audioBufferSourceNode_1.stop()
      }
    })
}

开启和关闭事件

methods:{
    //音乐按钮
    Openimg(){
      let audio = document.getElementById('panmuc')
      if (this.isopenimg) {  //点击暂停
        this.isopenimg = false
        audio.pause()
        if (this.audioBufferSourceNode_1) {
          this.audioBufferSourceNode_1.stop()
        }
      } else {
        this.isopenimg = true  //开启音频
        audio.play()
      }
    },
     //进入页面mounted调的函数
       PlayMusic () {
      var ua = navigator.userAgent.toLowerCase()
      if (ua.indexOf('like mac os x') > 0) {
        console.log('苹果手机')
        this.musicplay('https://cpicaicdn.abtpt.cn/bxhd/zqdt2023/share/zqdt.mp3', 'bg')
      } else {
        var LoadingScene = function () {
          var _this = _super !== null && _super.apply(this, arguments) || this
          _this.currentLoad = 0
          _this.loadCount = 0
          _this.scenes = []
          _this.bg = null // 背景
          _this.loading = null // 背景
          _this.loading_num = null // 背景
          _this.deer = null // 背景
          _this.floatPoint = 0
          _this.update_time = 0
          return _this
        }
        let LoadingScene_1 = LoadingScene
        LoadingScene_1.audioContext = new window.AudioContext()
        var analyser_1 = LoadingScene_1.audioContext.createAnalyser()
        analyser_1.fftSize = 256
        var str = 'https://cpicaicdn.abtpt.cn/bxhd/zqdt2023/share/zqdt.mp3'
        var xhr = new XMLHttpRequest()
        xhr.open('GET', str, true)
        xhr.responseType = 'arraybuffer'
        xhr.onload = function (e) {
          decodecFile_1(this.response)
        }
        xhr.send()
        var decodecFile_1 = (fileContent) => {
          LoadingScene_1.audioContext.decodeAudioData(fileContent, (buffer) => {
            if (this.audioBufferSourceNode_1) {
              this.audioBufferSourceNode_1.stop()
            }
            this.audioBufferSourceNode_1 = LoadingScene_1.audioContext.createBufferSource()
            this.audioBufferSourceNode_1.connect(analyser_1)
            analyser_1.connect(LoadingScene_1.audioContext.destination)
            this.audioBufferSourceNode_1.buffer = buffer
            this.audioBufferSourceNode_1.loop = true
            console.log('audioBufferSourceNode_1', this.audioBufferSourceNode_1)
            this.audioBufferSourceNode_1.start(0)
            let now = Date.now()
            console.log(now)
            $('.openimg').click(() => {
              console.log('安卓暂停计时')
              let currentTime = Date.now() - now
              console.log(currentTime)
              window.sessionStorage.setItem('currentTime', currentTime / 1000)
            })
          })
        }
        // }
      }
    },
    musicplay(url, type){
         let aud1 = document.getElementById('panmuc')
      aud1.loop = true
      aud1.src = url
      if (window.Audio) {
        Audio.prototype.autoPlay = function (callback) {
          var audio = this
          audio.play()
          console.log('音频已播放')
          if (audio.paused) {
            console.log('音频已暂停')
            var ev = function () {
              document.removeEventListener('touchstart', ev, true)
              console.log('触摸')
              audio.play()
              callback && callback()
            }
            if (/MicroMessenger/i.test(navigator.userAgent)) {
              console.log(navigator.userAgent, 'navigator.userAgent2')
              if (window.WeixinJSBridge) {
                // eslint-disable-next-line no-undef
                WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                  console.log('返回')
                  audio.play()
                  callback && callback()
                })
              } else {
                document.addEventListener('WeixinJSBridgeReady', function () {
                  // eslint-disable-next-line no-undef
                  WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                    if (audio.ended) {
                      console.log(222)
                      audio.play()
                      callback && callback()
                    } else {
                      console.log('首次')
                      audio.play()
                      callback && callback()
                    }
                  })
                }, false)
              }
            } else {
              console.log('监听触摸')
              document.addEventListener('touchstart', ev, true)
            }
          } else {
            console.log('播放')
            callback && callback()
          }
        }
      } else {
        console.log('未播放')
        musicplay('https://cpicaicdn.abtpt.cn/bxhd/zqdt2023/share/zqdt.mp3', 'bg')
      }
      if (type === 'bg') {
        console.log('type背景音乐')
        aud1.autoPlay()
      } 
      let now = Date.now()
      $('.openimg').click(function () {
        console.log('苹果暂停计时')
        let currentTime = Date.now() - now
        window.sessionStorage.setItem('currentTime', currentTime / 1000)
      })
    }    
}