移動端audio自動播放問題

標籤：

中秋臨近，心血來潮想做個手機端賀卡，以前接觸的移動端較少，雖然是個簡單的賀卡，其實也蠻多坑的，簡略說一下在製作賀卡的過程遇到的坑：

一：移動端的螢幕大小不能算作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);

 

移動端audio自動播放問題