监听界面
//–创建页面监听，等待微信端页面加载完毕 触发音频播放
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(); });
### <span class="">方法二微信提供</span>
>
> <span class="">在微信中可以使用微信提供的解决方案</span>
>
>
> 引入js
>
>
> <div class="md-htmlblock md-rawblock md-end-block" spellcheck="false">
> <div class="md-htmlblock-container md-rawblock-container md-raw-html-src">
> <div class="md-raw-html-src-content">
> <script src=”http://res.wx.qq.com/open/js/jweixin-1.0.0.js”></script>
> </div>
> </div>
> </div>
>
> <div class="md-htmlblock md-rawblock md-end-block" spellcheck="false">
> <div class="md-htmlblock-container md-rawblock-container md-raw-html-src">
> <div class="md-raw-html-src-content">
> <script>
> </div>
> </div>
> </div>
>
>
> function autoPlayVideo(){
>
>
>
> wx.config({
>
>
>
> debug:false,
>
>
>
> appId:””,
>
>
>
> timestamp:1,
>
>
>
> nonceStr:””,
>
>
>
> signature:””,
>
>
>
> jsApiList:[]
>
>
>
> });
>
>
>
> wx.ready(function(){
>
>
>
> var autoplayVideo=document.getElementById(“audio”);
>
>
>
> autoplayVideo.play()
>
>
>
> })
>
>
>
> };
>
>
>
> autoPlayVideo();
>
>
>
> <span class="md-tag md-raw-inline" spellcheck="false"></script></span>
>
>
> ```
<span role="presentation"> //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以</span>
<span role="presentation"> document.getElementById('car_audio').play();</span>
<span role="presentation"> //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效</span>
<span role="presentation"> document.addEventListener("WeixinJSBridgeReady", function () {</span>
<span role="presentation"> document.getElementById('audio').play();</span>
<span role="presentation"> document.getElementById('video').play();</span>
<span role="presentation"> }, false);</span>
<span role="presentation"> </span>
其他思路
原理就是通过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>
>
>
> 实现参考<span class="md-link" spellcheck="false">[https://www.cnblogs.com/mq0036/p/6278498.html](https://www.cnblogs.com/mq0036/p/6278498.html)</span> <span class="md-link" spellcheck="false">[https://www.cnblogs.com/snandy/p/3704938.html](https://www.cnblogs.com/snandy/p/3704938.html)</span>
>
### <span class="">其他参数</span>
>
> <span class="md-link" spellcheck="false">[https://www.cnblogs.com/yangwenzhi/p/7678188.html](https://www.cnblogs.com/yangwenzhi/p/7678188.html)</span>
>
>
>
> <span class="md-link md-expand" spellcheck="false">[https://www.cnblogs.com/xiongdahei/p/7144700.html](https://www.cnblogs.com/xiongdahei/p/7144700.html)</span>
>
💬 评论