微信浏览器静音模式下自动播放音频实践

最近在项目开发中遇到一个很奇怪的需求，h5需要在用户设置静音的情况下也能正常播放音频听到声音......为此也是花了大把的时间去研究如何实现这个功能，下面我将一些使用经验分享给大家！

首先android和ios需要进行判断从而走不同的逻辑进行处理

android环境

第一步

安装howler库安装教程

第二步

安装完毕后添加以下代码即可

import { Howl } from 'howler'
const _audio= new Howl({

        src: url,  // BGM路径

        loop: true,  // 是否循环播放

        volume: true,  // 音量大小0~1

        sprite: {}  // 声音精灵用于只需播放BGM的特定片段

})

_audio.play();

ios环境

第一步

需要先加载微信JSDK工具包使用教程

第二步

加载完毕后添加以下代码即可

const _audio = document.createElement('audio')
      _audio.src =  './media/BGM.mp3'
      _audio.loop = true
      _audio.autoplay = true
      _audio.preload = 'auto'

      (WeixinJSBridge：微信JSDK导入成功才会有)
      console.log('window.WeixinJSBridge==>',window.WeixinJSBridge)

      window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {}, () => {

          _audio.play()
          console.log('BGM播放')

       })

本文到这里就结束啦，希望能够帮助到大家！