移动端audio自动播放问题

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

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

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

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

<script>

function audioPlay(){
    document.getElementById("myaudio").play();
}

function audioLoad(){
    document.getElementById("myaudio").pause();
}

// 触发播放
audioPlay();



</script>
原文地址:https://www.cnblogs.com/lmsblogs/p/5860665.html