自动播放背景音乐

最新推荐文章于 2024-09-10 15:29:33 发布

原创最新推荐文章于 2024-09-10 15:29:33 发布 · 3.4k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了如何使用HTML、JavaScript和CSS实现网页背景音乐的自动播放功能，包括html代码段、js代码段以及用于控制音乐播放和动画效果的css样式。

html代码

<div id="audio-btn" class="rotate">
	<audio id="media" autoplay preload loop src="img/music.mp3"></audio>
</div>

js代码

// 自动播放背景音乐
function audioAutoPlay(id) {
	var audio = document.getElementById(id);
	var play = function () {
		audio.play();
	};
	document.addEventListener("WeixinJSBridgeReady", play, false);
	document.addEventListener('YixinJSBridgeReady', play, false);
	play();
}
audioAutoPlay('media');

// 开关控制音乐播放
var audio = $('#media')[0];
$('#audio-btn').click(function(){
	if($('#audio-btn').hasClass('rotate')) {
		$('#audio-btn').removeClass('rotate');
		audio.pause();
	}else{
		$('#audio-btn').addClass('rotate');
		audio.play();
	}
});

css样式+动画

#audio-btn {
	position: fixed;
	top: .8rem;
	right: .8rem;
	z-index: 10;
	width: 1.25rem;
	height: 1.25rem;
	background: url(../img/btn-music.png) no-repeat center center;
	background-size: 100% 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.rotate {
	animation:rotate-left 2s linear infinite;
	-webkit-animation:rotate-left 2s linear infinite;
	-moz-animation:rotate-left 2s linear infinite;
}
@keyframes rotate-left {
	0%{
		transform:rotate(360deg);
	}
	100%{
		transform:rotate(0);
	}
}