微信游览器，解决安卓和ios自动播放音乐

暂时解决了安卓和ios不可自动播放的问题。

html代码，用于苹果的音乐播放<audio id="audio" src="../music.mp3" loop autoplay></audio>
<button id="start">start</button>
<button id="stop">stop</button>

获取html的audio的dom
let htmlAudio = document.querySelector('#audio')

// 这里是AudioContext给安卓用
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;var context = new window.AudioContext();
var source = null;
var audioBuffer = null;function stopSound() {if (source) {source.stop(0); //立即停止}
}function playSound() {source = context.createBufferSource();source.buffer = audioBuffer;source.loop = true; //循环播放source.connect(context.destination);if (!(/iphone/.test(navigator.userAgent.toLowerCase()))) {source.start(0); //立即播放}function initSound(arrayBuffer) {context.decodeAudioData(arrayBuffer, function(buffer) { //解码成功时的回调函数audioBuffer = buffer;playSound();}, function(e) { //解码出错时的回调函数console.log('Error decoding file', e);});
}function loadAudioFile(url) {var xhr = new XMLHttpRequest(); //通过XHR下载音频文件xhr.open('GET', url, true);xhr.responseType = 'arraybuffer';xhr.onload = function(e) { //下载完成initSound(this.response);};xhr.send();
}

// 安卓，加载并播放
if (!(/iphone/.test(navigator.userAgent.toLowerCase()))) {    loadAudioFile('../music.mp3');
}

// 这块是移动端ios自动播放
const invoke = () => {if (/iphone/.test(navigator.userAgent.toLowerCase())) {if (htmlAudio.paused) {htmlAudio.play()}}
}if (typeof WeixinJSBridge === 'undefined') {document.addEventListener('WeixinJSBridgeReady', () =>WeixinJSBridge.invoke('getNetworkType', {}, () => invoke()))
}
else {WeixinJSBridge.invoke('getNetworkType', {}, () => invoke())
}

// 按钮播放与暂停
$('#start').on('click', function() {if (/iphone/.test(navigator.userAgent.toLowerCase())) {htmlAudio.play()} else {playSound()}
})
$('#stop').on('click', function() {if (/iphone/.test(navigator.userAgent.toLowerCase())) {htmlAudio.pause()} else {stopSound()}
})

微信游览器，解决安卓和ios自动播放音乐相关推荐

解决H5项目微信浏览器安卓系统无法自动播放背景音乐的问题
背景制作的H5项目,使用vedio标签,利用wx.getNetworkType来自动播放背景音乐. 但是安卓的vedio自动播放被微信浏览器限制了. 解决方案采用web vedio api 细节解 ...
微信公众号内下载pdf等文件，受微信所限制，安卓和IOS不同处理方式（最最最优版）
继上一篇文章微信公众号内下载pdf等文件,受微信所限制,安卓和IOS不同处理方式后觉得还有更好的解决办法,这次真的找到更加优化版本,一定需要后台配合才行:后台接口返回Blob,后端设置respons ...
解决微信页面加载自动播放音乐
项目中突然用到了这个功能,于是记录了下来 html: <audio style="display:none; height: 0" id="bg-music&quo ...
解决iphone 微信H5自动播放音乐问题
解决iphone 微信H5自动播放音乐问题参考文章: (1)解决iphone 微信H5自动播放音乐问题 (2)https://www.cnblogs.com/hlhs/p/11157401.html ...
iphone 微信打开H5自动播放音乐问题
解决iphone 微信H5自动播放音乐问题 --由于苹果的ios系统的安全保护较严格,iphone手机打开微信H5的时候(针对于已对audio标签设置 autoplay为true的H5),通常要先点击 ...
微信公众号网页 H5 video 标签自动播放
目录微信公众号网页 H5 video 标签自动播放问题描述解决方案微信公众号网页 H5 video 标签自动播放环境:微信公众号网页需求:H5 video 标签自动播放视频 video 标 ...
html5手机不能自动播放音乐,H5案例---解决H5中背景音乐无法自动播放问题
该楼层疑似违规已被系统折叠隐藏此楼查看此楼四.完整代码您的浏览器不支持 audio标签. // 音乐播放 function autoPlayMusic() { // 自动播放音乐效果,解决浏览器 ...
解决移动端音频自动播放问题
解决移动端音频自动播放问题参考文章: (1)解决移动端音频自动播放问题 (2)https://www.cnblogs.com/lcf1314/p/5867010.html 备忘一下.
微信小程序进入某一页面自动播放背景音乐
前言:微信小程序进入某一个页面自动播放背景音乐,当退出这个页面时,音乐关闭 wxml代码: <audioloopid="greetings"src="https:/ ...

微信游览器，解决安卓和ios自动播放音乐

微信游览器，解决安卓和ios自动播放音乐相关推荐

最新文章

热门文章