html增加背景音乐，并可点击按钮实现暂停或播放【适用手机端】

实现效果：
页面加载完成自动播放背景音乐，可点击进行关闭操作
html代码：
    <html>
		<title>背景音乐</title>
	</head>
	<body>
		<p class="close_music_div"><a href="javascript:void(0)" onclick="pauseAuto()" class="f85">关闭音乐 <img src="__HOMESTYLE__/images/music_03.jpg" alt=""></a></p>
	    <p class="open_music_div" style="display: none"><a href="javascript:void(0)" onclick="openmusic()" class="f85">开启音乐 </a></p>
		<audio style="display:none; height: 0" id="bg-music" preload="auto" src="/uploads/music/{$music_info.music_url}" loop="loop"></audio>
		<script>
			//音乐自动播放
	        $(document).ready(function(){
	            autoPlayMusic();
	            audioAutoPlay();
	        });

	        function openmusic(){
	        	autoPlayMusic();
	            audioAutoPlay();
	            $(".close_music_div").css({"display":"block"});
			  	$(".open_music_div").css({"display":"none"});
	        }

	        function pauseAuto(){
	        	var audio = document.getElementById('bg-music');
			  	audio.pause();
			  	$(".close_music_div").css({"display":"none"});
			  	$(".open_music_div").css({"display":"block"});
		  	}

	        function audioAutoPlay() {
	            var audio = document.getElementById('bg-music');
	            audio.play();
	            document.addEventListener("WeixinJSBridgeReady", function () {
	                audio.play();
	            }, false);
	        }
	        // 音乐播放
	        function autoPlayMusic() {
	            // 自动播放音乐效果，解决浏览器或者APP自动播放问题
	            function musicInBrowserHandler() {
	                musicPlay(true);
	                document.body.removeEventListener('touchstart', musicInBrowserHandler);
	            }
	            document.body.addEventListener('touchstart', musicInBrowserHandler);
	            // 自动播放音乐效果，解决微信自动播放问题
	            function musicInWeixinHandler() {
	                musicPlay(true);
	                document.addEventListener("WeixinJSBridgeReady", function () {
	                    musicPlay(true);
	                }, false);
	                document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
	            }
	            document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
	        }
	        function musicPlay(isPlay) {
	            var media = document.querySelector('#bg-music');
	            if (isPlay && media.paused) {
	                media.play();
	            }
	            if (!isPlay && !media.paused) {
	                media.pause();
	            }
	        }
		</script>
	</body>
</html>
html增加背景音乐，并可点击按钮实现暂停或播放【适用手机端】

猜你喜欢
