记录一个audio无法自动播放的坑

部分浏览器规定了音视频不能自动播放（要手动点击播放按钮），除非添加muted（静音）属性
但是想给页面添加背景音乐，并且隐藏audio，一打开页面音频便自动播放怎么办？
乍一想好像是个死循环，其实，只要把play function和鼠标事件进行绑定就好了

<script>
// 添加音频
audio = document.createElement("audio");
audio.src = "*.mp3";
audio.autoplay = true;
audio.style.width = "1px";
audio.style.height = "1px";
var body = document.getElementsByTagName("body")[0];
body.appendChild(audio);
// 点击页面后播放audio并隐藏
body.onclick = function () {
	audio.play();
	audio.hidden = true;
}
// 也可以绑定到其他元素的事件上, 比如一个表格
var table = document.getElementsByTagName("table")[0];
table.onmousedown = function () {
	audio.play();
	audio.hidden = true;
}
// 或者把audio装起来, 点击audio所在的区域后隐藏
var div = document.createElement("div");
div.style.backgroundColor = "transparent";
div.appendChild(audio);
body.appendChild(div);
div.onmousemove = function () {
	audio.play();
	audio.hidden = true; // or audio.style.display = "none";
}
</script>

设置了audio的大小为1*1px, 防止audio隐藏时布局变化大引起页面跳动