移动端audio自动播放问题

Posted 2020-08-08

中秋临近，心血来潮想做个手机端贺卡，以前接触的移动端较少，虽然是个简单的贺卡，其实也蛮多坑的，简略说一下在制作贺卡的过程遇到的坑：

一：移动端的屏幕大小不能算作body的大小，因为手机浏览器头部都有网址导航等等，底部也有留白，应该出去这一部分；

二：audio背景音乐是不能自动播放的，不管怎么调试js都没用，经过多方查证，居然是移动端做了限制，一定要用户交互才能触发，网上的解决方案大多是通过touchstart事件；

<audio id="myaudio" >
    <source src="/static/warn.mp3" type="audio/mpeg">
</audio>

<script>
var tt;
function audioPlay(){
    document.getElementById("myaudio").play();
    tt = setTimeout(audioPlay, 5000);
}

function audioLoad(){
    document.getElementById("myaudio").pause();
}
</script>

// 触发播放
audioPlay();

//清除定时任务
clearTimeout(tt);