监听界面
//–创建页面监听，等待微信端页面加载完毕 触发音频播放
document.addEventListener(‘DOMContentLoaded’, function () {
function audioAutoPlay() {
var audio = document.getElementById(‘audio’);
audio.play();
document.addEventListener(“WeixinJSBridgeReady”, function () {
audio.play();
}, false);
audioAutoPlay();
});
//–创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
document.addEventListener(‘touchstart’, function () {
function audioAutoPlay() {
var audio = document.getElementById(‘audio’);
audio.play();
}
audioAutoPlay();
});
// var firstTouch = true; $("body").bind("touchstart",function(e) { if ( firstTouch ) { firstTouch = false; document.getElementById('audio').play(); }else{ return; } }); // $("body").one("touchstart",function() { document.getElementById('audio').play(); });
方法二微信提供
在微信中可以使用微信提供的解决方案
引入js
<script src=”http://res.wx.qq.com/open/js/jweixin-1.0.0.js”></script><script>function autoPlayVideo(){
wx.config({
debug:false,
appId:””,
timestamp:1,
nonceStr:””,
signature:””,
jsApiList:[]
});
wx.ready(function(){
var autoplayVideo=document.getElementById(“audio”);
autoplayVideo.play()
})
};
autoPlayVideo();
</script>
//一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 document.getElementById('car_audio').play(); //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 document.addEventListener("WeixinJSBridgeReady", function () { document.getElementById('audio').play(); document.getElementById('video').play(); }, false);
其他思路
原理就是通过new一张图片，监听一张图片的onload事件，结束后回调执行音频播放audio.play()即可，原理相当于执行了一次交互。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - load event</title> </head> <body> <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"> <p id="p1">loading...</p> <script type="text/javascript"> img1.onload = function() { p1.innerHTML = 'loaded' } </script> </body> </html>实现参考https://www.cnblogs.com/mq0036/p/6278498.html https://www.cnblogs.com/snandy/p/3704938.html
其他参数
https://www.cnblogs.com/yangwenzhi/p/7678188.html
