0

H5自动播放音频

方法一 监听界面元素

监听界面

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

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

天边的星星