H5音视频自动播放 退出页面暂停播放

音视频设置autoplay后，并不能自动播放，而是需要用户与页面发生交互

解决方案：
1、在页面进入后，监听touchstart事件，用户触摸页面的任意位置后，调用audio.play()来播放音视频

//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
document.addEventListener('touchstart', function () {
        function playAudio() {
            let audio = document.getElementById('audio');
                audio.play();
        }
        playAudio();
 });

2、在微信中打开页面，
引入微信插件

<srcipt src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

监听WeixinJSBridgeReady
调用

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

页面后台退出，音频自动暂停，再次回来后自动播放

判断页面是否隐藏，如果页面隐藏，暂停播放

isPageLeave() {
	let hiddenProperty =
	    'hidden' in document
	        ? 'hidden'
	        : 'webkitHidden' in document
	        ? 'webkitHidden'
	        : 'mozHidden' in document
	        ? 'mozHidden'
	        : null
	let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange')
	let onVisibilityChange = () => {
	    if (!document[hiddenProperty]) {
	        audio.play()
	    } else {
	        audio.pause()
	    }
	}
	document.addEventListener(visibilityChangeEvent, onVisibilityChange)
	}