移动端手机浏览器不支持audio标签音乐自动播放的解决方案
用HTML5的audio标签在页面中引入音频文件非常方便，如果我们想让音乐自动播放，只需给audio标签加一个autoplay属性就行了。比如这样写：
<audio src="music.mp3" autoplay></audio>
当然，audio标签还有其他一些属性，简单了解一下：
- autoplay: 自动播放
- preload: 预加载
- controls: 显示播放控制台
- loop: 引入的音频文件默认只播放一次，loop属性可以指定循环播放次数，如果不指定具体次数，则视为一直循环播放
但是设置了自动播放的音乐后，pc端浏览器一切正常，但是手机移动端浏览器（比如UC浏览器、腾讯浏览器、360浏览器、夸克浏览器等）无法实现自动播放的效果。这是因为几乎所有移动端浏览器，为了所谓的"用户体验"，都默认禁掉了audio标签的autoplay自动播放属性，必须通过用户的手动触发才可以实现播放的效果。
但是，真机实测中还是遇到了不少坑，特将经验总结如下：
解决思路是这样，给document添加一个点击(触摸)事件，在该事件中执行audio元素对象的play()方法即可。
不废话，写了个demo，直接上代码，本demo实测兼容Android和IOS系统，有问题欢迎在本文下留言交流。
对了，还要格外强调一下，演示代码中给document添加的是touchend事件，经实测touchend和click事件可以，但是touchstart事件无效，一定不要用touchstart！一定不要用touchstart！一定不要用touchstart！老孙在这里卡了好久，一开始一直用touchstart，各种属性各种控制，都不行，最后鬼使神差写了个touchend，意外得到了结果，才有了本文。别问为啥，不信邪的自己去测。
在线演示地址: http://www.sunqizheng.com/wp-content/uploads/2018/07/audioautoplay/
可以用手机扫描下方二维码直接打开演示地址:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动端音乐自动播放效果</title>
</head>
<body>
<audio src="zhubajie.mp3" id="audio" autoplay loop></audio>
<script type="text/javascript">
var audio = document.getElementById("audio");
document.ontouchend = function() {
audio.play()
}
</script>
请用手机打开本页面
<br />
在页面任意位置点击一下
<br />
就能听到音乐响起了！
<br />
by 孙琪峥 www.sunqizheng.com
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body,html{
width: 100%;
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
font-size: 5vw;
text-align: center;
line-height: 1.5em;
}
</style>
</body>
</html>
