
移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐。基于微信的H5页面的音频自动播放的方法网上有很多教程,本次分享的只是一种思路!
代码如下:
- <audio id="bgaudio" loop="loop" preload="auto" autoplay="autoplay">
- <source src="音乐外链.mp3" type="audio/ogg" />
- <source src="音乐外链.mp3" type="audio/mp3" />
- </audio>
- <script>
- var bgaudio = document.getElementById('bgaudio');
- function bgmusic(){
- if(bgaudio.paused){
- bgaudio.play();
- $("#bgmusic").addClass("sping");
- }else{
- bgaudio.pause();
- $("#bgmusic").removeClass("sping");
- }
- }
- </script>
- <script>
- var audio=document.querySelector("#bgaudio");
- document.addEventListener("WeixinJSBridgeReady",function(){
- audio.play();
- },false);
- </script>