解决兼容新版ios以及安卓自动播放背景音乐

最新推荐文章于 2021-12-28 17:38:58 发布

weixin_34019929

最新推荐文章于 2021-12-28 17:38:58 发布

阅读量281

点赞数

文章标签：移动开发

原文链接：https://my.oschina.net/sycbbb/blog/897376

版权

为什么80%的码农都做不了架构师？>>>

<div id="music" class="music play">
        <a class="music-btn"></a>
 </div>
<audio id="bgMusic" src="scripts/m.mp3" autoplay="autoplay" loop="loop"></audio>

css

#music{
            position: absolute;
            z-index: 1000;
            right:10px;
            top:15px;
            width: 25px;
            height: 25px;
        }
         .music .music-btn {
            display: block;
            padding-left: 1px;
            width: 25px;
            height: 25px;
        }
        .play .music-btn{
        	display: block;
            padding-left: 1px;
            width: 25px;
            height: 25px;
            background-image: url(images/music.png);
            background-size: 100% 100%;
        }
        .pause .music-btn{
        	display: block;
            padding-left: 1px;
            width: 25px;
            height: 25px;
            background-image: url(images/music1.png);
            background-size: 100% 100%;
        }

重点js

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script>
	var music=document.getElementById('music');
	var audio=document.getElementById('bgMusic');
	function autoPlayAudio() {
	    wx.config({
	         // 配置信息, 即使不正确也能使用 wx.ready
	         debug: false,
	         appId: '',
	         timestamp: 1,
	         nonceStr: '',
	         signature: '',
	         jsApiList: []
	    });
	    wx.ready(function() { 
	        audio.play();
	    });
	}
    autoPlayAudio(); 
    music.onclick=function(){
    	if(audio!==null){
            if(!audio.paused){ 
                audio.pause();// 这个就是暂停
                music.setAttribute("class", "pause"); 
            }else{  
                audio.play(); // 这个就是播放
                music.setAttribute("class", "play"); 
            }
        }
    }
</script>

转载于:https://my.oschina.net/sycbbb/blog/897376