方法一 监听界面元素

监听界面

//--创建页面监听,等待微信端页面加载完毕 触发音频播放

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

https://www.cnblogs.com/xiongdahei/p/7144700.html