微信h5使用audio不会自动播放

微信h5使用audio不会自动播放

JS-SDK

demo

h5引入vue.js 实现背景音乐暂停/播放

• 这里引入JS-SDK , 此外实现微信分享…
• 如果不支持自动播放时，触摸滑动时自动播放

template

<audio id="audio" loop preload="auto" autoplay="autoplay" src="./music/StevenBurke.mp3"></audio>

// 控制是否播放
<div class="music_box" @click.stop="musicTap">
     <img class="music_icon ani" v-if="isMusic" src="./images/music.png" alt="">
     <img class="music_icon" v-if="!isMusic" src="./images/music_close.png?v=1" alt="">
</div>

js

<script> 
	Vue.component('invitation', {
        template: '#templateId',
        data() {
            return {
                isMusic: true, // 默认自动播放
            }
        },
        mounted() {
            this.$nextTick(() => {
                //  方式一： 通过wx sdk 获取配置信息
                this.shareWx();
				
                // 方式二：
                // document.addEventListener('WeixinJSBridgeReady', () => {
                //     this.audioAutoPlay();
                //     document.getElementById('index').addEventListener("touchstart", this.audioAutoPlay);
                // }, false)
            });
        },
    	methods: {
            shareWx() {
                let params = {
                    url: decodeURIComponent(location.href.split('#')[0])
                }

                let url = `${this.url}/wechat/api/wechat/share`;
                that.$http.post(url, params).then((res) => {
                   // ...
                    wx.config({
                        debug: false,
                        appId: datas.appId,
                        timestamp: datas.timestamp,
                        nonceStr: datas.nonceStr,
                        signature: datas.signature,
                        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
                    });

                    // 通过ready接口处理成功验证
                    wx.ready(function() {
                        
						// 音频播放
                        that.audioAutoPlay();
                        
                        // 根据个人所需
                        document.getElementById('index').addEventListener("touchstart", that.audioAutoPlay);
						
                        // ...
                    });
					
                    // 通过error接口处理失败验证
                    wx.error(res =>{
                        console.log(res);
                    });
                })
            },
            removeHandler() {
                document.getElementById('index').removeEventListener("touchstart", this.audioAutoPlay);
                this.audioAutoPause();
            },
            audioAutoPlay() {
                let audio = document.getElementById('audio');
                audio.play();
            },
            audioAutoPause() {
                let audio = document.getElementById('audio');
                audio.pause();
            },
            musicTap() {  
                if (this.isMusic) {
                    that.isMusic = false;
                    this.removeHandler();
                } else {
                    that.isMusic = true;
                    document.getElementById('index').addEventListener("touchstart", this.audioAutoPlay());
                }
            }
        }
	})

    var vm = new Vue({
        el: '#app'
    })

 
</script>

解决安卓不会自动播放其他方式

• 触摸屏幕触发事件，进行音频播放

isAutoPlay() {
    document.addEventListener('touchstart', function () {
        function audioAutoPlay() {
            let audio = document.getElementById('audio');
            audio.play();
        }
        audioAutoPlay();
    });
},

• or 监听 等待微信端页面加载完毕 触发音频播放

document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});

• or

document.addEventListener('WeixinJSBridgeReady', () => {
    // 自动播放
	this.audioAutoPlay();
    
    // touchstart 触发
	document.getElementById('index').addEventListener("touchstart", this.audioAutoPlay);
}, false)