mgtv - 素材

当前位置:Gxlcms > 播放器 > jQuery基于Audio图标音乐播放代码

jQuery基于Audio图标音乐播放代码

时间:2021-07-01 10:21:17 帮助过:0人阅读

jQuery基于Audio图标音乐播放代码 jQuery基于Audio图标音乐播放代码是一款点击图标mp3音乐播放效果代码。
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery基于Audio图标音乐播放代码 - mgtv素材</title>

<style>
	body{background-color: #37325f;}
	*{padding: 0; margin: 0;}
	.music-box{overflow: hidden; margin: 100px auto; width: 300px; height:auto; border-radius: 10px; background: #0a0a0a; border: 5px solid #000;}
	.music-list{overflow: hidden; margin: 0 auto; padding: 30px 15px; border-radius: 10px; border: 5px solid #fff;}
	.music-list li{overflow: hidden; margin: 0 10px 10px; width: calc(50% - 20px); float: left;}
	.music-list .music-name{overflow: hidden; margin: 0 auto; width: 100%; height: 22px; }
	.music-list .music-name p{overflow: hidden; display: table; margin: 0 auto; width: 100%; height: 22px; line-height: 22px; font-size: 16px; color: #fff; text-align: center;}
	.video-img-mask{overflow: hidden; margin: 0 auto; width: 72px; height: 72px;}
	.music-name p.on{
		-webkit-animation:tada 1.5s .2s ease both infinite;
		-moz-animation:tada 1.5s .2s ease both infinite;}
	@-webkit-keyframes tada{
		0%{-webkit-transform:scale(1)}
		10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}
		30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}
		40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}
		100%{-webkit-transform:scale(1) rotate(0)}
	}
	@-moz-keyframes tada{
		0%{-moz-transform:scale(1)}
		10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}
		30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}
		40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}
		100%{-moz-transform:scale(1) rotate(0)}
	}
</style>

</head>
<body>

<div class="music-box">
	<ul class="music-list">
		<li>
			<div class="video-img-mask">
				<img src="images/audio_icon.png" class="audio-iocn" alt="">
				<audio class="audio" src="images/dj.mp3" preload="auto"></audio>
			</div>
			<div class="music-name"><p>童声DJ</p></div>
		</li>
		<li>
			<div class="video-img-mask">
				<img src="images/audio_icon.png" class="audio-iocn" alt="">
				<audio class="audio" src="images/tdd.mp3" preload="auto"></audio>
			</div>
			<div class="music-name"><p>萧萧 - 爱要坦荡荡</p></div>
		</li>
		<li>
			<div class="video-img-mask">
				<img src="images/video_icon.png" class="video-iocn" alt="">
				<audio class="audio" src="images/tdd.mp3" preload="auto"></audio>
			</div>
			<div class="music-name"><p>萧萧 - 爱要坦荡荡</p></div>
		</li>
		<li>
			<div class="video-img-mask">
				<img src="images/video_icon.png" class="video-iocn" alt="">
				<audio class="audio" src="images/dj.mp3" preload="auto"></audio>
			</div>
			<div class="music-name"><p>童声DJ</p></div>
		</li>
		<li>
			<div class="video-img-mask">
				<img src="images/audio_icon.png" class="audio-iocn" alt="">
				<audio class="audio" src="images/dj.mp3" preload="auto"></audio>
			</div>
			<div class="music-name"><p>童声DJ</p></div>
		</li>
		<li>
			<div class="video-img-mask">
				<img src="images/audio_icon.png" class="audio-iocn" alt="">
				<audio class="audio" src="images/tdd.mp3" preload="auto"></audio>
			</div>
			<div class="music-name"><p>萧萧 - 爱要坦荡荡</p></div>
		</li>
		<li>
			<div class="video-img-mask">
				<img src="images/video_icon.png" class="video-iocn" alt="">
				<audio class="audio" src="images/tdd.mp3" preload="auto"></audio>
			</div>
			<div class="music-name"><p>萧萧 - 爱要坦荡荡</p></div>
		</li>
		<li>
			<div class="video-img-mask">
				<img src="images/video_icon.png" class="video-iocn" alt="">
				<audio class="audio" src="images/dj.mp3" preload="auto"></audio>
			</div>
			<div class="music-name"><p>童声DJ</p></div>
		</li>
	</ul>
</div>

<script src="js/jquery.min.js"></script>
<script>
	$(function(){
		//jq 转js 控制暂停或播放切换
		// 获取所有audios
		var audios = document.getElementsByTagName("audio");
		// 暂停函数
		function pauseAll() {
			var self = this;
			[].forEach.call(audios, function (i) {
				// 将audios中其他的audio全部暂停
				i !== self && i.pause();
			})
		}
		// 给play事件绑定暂停函数
		[].forEach.call(audios, function (i) {
			i.addEventListener("play", pauseAll.bind(i));
		});
		//点击切换播放
		$(".video-img-mask").click(function () {
			if(!$(this).hasClass("video-img-paly")){//如果当前播放
				$('.video-img-mask').removeClass("video-img-paly");
				$('.audio-iocn').attr('src','images/audio_icon.png'); //播放图片
				$('.video-iocn').attr('src','images/video_icon.png'); //播放图片
				$(this).addClass("video-img-paly");
				$('.music-name p').removeClass("on");
				$(this).parents('li').find('.music-name p').addClass("on");
				$(this).find('.audio-iocn').attr('src','images/play_icon.png');  //播放图片
				$(this).find('.video-iocn').attr('src','images/play_icon.png');  //播放图片
				$(this).find('.audio').get(0).play();  //开始播
			}else{ //如果当前暂停
				$(this).removeClass("video-img-paly");
				$('.music-name p').removeClass("on");
				$(this).find('.audio-iocn').attr('src','images/audio_icon.png'); //播放图片
				$(this).find('.video-iocn').attr('src','images/video_icon.png');  //播放图片
				$(this).find('.audio').get(0).pause();  //开始播放
			}
		})
	});
</script>
<div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源:<a href="https://www.mgtv.xyz" target="_blank">mgtv素材</a></p>
</div>
</body>