h5 中MP3 播放暂停 jq

Posted 2020-10-21 面朝阳光/

<!--音乐-->
		<div id="music">
			<img src="../img/music.gif" class="m" />
			<img src="../img/music_off.png" class="off" />
			<!--<audio src="../mp3/bgmusic.mp3" loop="loop" preload="auto" autoplay="autoplay" class="bgmusic">你的浏览器不支持audio标签。</audio>-->
		</div>
		<!--end-->

　　

#music {
	width: 0.8rem;
	height: 0.8rem;
	position: fixed;
	top: 0.2rem;
	right: 0.3rem;
	z-index: 9999;
	background-size: contain;
	text-align: center;
}

@keyframes music {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

#music img.m{
	width: 100%;
	height: 100%;
}

#music img.off {
	position: absolute;
	top: 25%;
	left: 25%;
	transform: translateX(-50%);
	animation: music 2s linear infinite;
}

　　

<script type="text/javascript">
			$(function(){
				var play=true;
				$("#music").click(function(e){
					if(play==true){
						$(".m").hide();
						$(".off").css({
							"transform":"rotate(0deg)",
							"animation":"music 0s"
						})
						$(".bgmusic").get(0).pause();
						play=false;
					}else{
						$(".m").show();
						$(".off").css({
							"animation":"music 2s linear infinite"
						})
						$(".bgmusic").get(0).play()
						play=true;
					}
				})
			})
		</script>