解决H5页面在微信浏览器不能自动播放问题(安卓,ios)

亲测,非常有用,非常有用,非常用。

引入微信jsdk依赖

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

主要代码:

function BGMAutoPlayMgr/* solveAndroidBGMAutoplay */(url) {
    this.audioContext = new (window.AudioContext || window.webkitAudioContext || window.mozAudioContext)();
    this.sourceNode = null;
    this.buffer = null;
    this.isPlayingBGM = false;
    this.toggleBGM = function () {
    if (typeof this.sourceNode == 'object') {
      if (this.isPlayingBGM) {
         this.sourceNode.stop();
         this.isPlayingBGM = false;
      } else this._playSourceNode();
    }
  }
  this._playSourceNode = function () {
     const audioContext = this.audioContext;
     audioContext.resume();
     const _sourceNode = audioContext.createBufferSource();
      _sourceNode.buffer = this.buffer;
      _sourceNode.loop = true;
      _sourceNode.connect(audioContext.destination);
     _sourceNode.start(0);
    this.sourceNode = _sourceNode;
    this.isPlayingBGM = true;
  }
  let loadAndAutoPlay = (audioUrl) => {
     const audioContext = this.audioContext;
     const xhr = new XMLHttpRequest();
     xhr.open('GET', audioUrl, true);
     xhr.responseType = 'arraybuffer';
    xhr.onreadystatechange = () => {
      if (xhr.status < 400 && xhr.status >= 200 && xhr.readyState === 4) {
       audioContext.decodeAudioData(xhr.response, buffer => {
       this.buffer = buffer;
     WeixinJSBridge.invoke("getNetworkType", {}, () => this._playSourceNode());
    });
   }
  }
  xhr.send();
}
   loadAndAutoPlay(url);
   loadAndAutoPlay = null;
}

// 调用
const bgm = new BGMAutoPlayMgr('www.mengxyz.com/images/zj.mp3');
bgm.toggleBGM();
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇