前端JS特效第14集：HTML5带背景音乐播放器代码

强迫领导写Bug

于 2024-07-03 18:00:00 发布

阅读量128

点赞数 1

文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/2401_85903333/article/details/139999101

版权

HTML5带背景音乐播放器代码，先来看看效果：

部分核心的代码如下(全部代码在文章末尾)：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5带背景音乐播放器代码</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="fonts/fontCss.css">
<link rel="stylesheet" type="text/css" href="css/music.css">
<style>
	body,html{
		margin:0;
		padding: 0;
		background: #000;
		height: 100%;
	}
</style>

</head>
<body>

<div class="music-bg" style="height: 100%;filter: blur(100px);transition:all 0.3s" id="music-bg">
	<div class="music-mask"></div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/music.js"></script>
<script type="text/javascript">
window.onload = function(){
	MC.music({
		hasAjax:false,
		left:'50%',
		bottom:'50%',
		musicChanged:function(ret){
			// alert(ret.url);
			// getMusic_buffer(ret.url);
			// return;
			var data = ret.data;
			var index = ret.index;
			var imageUrl = data[index].img_url;
			
			var music_bg = document.getElementById('music-bg');
			music_bg.style.background = 'url('+imageUrl+')no-repeat';
			music_bg.style.backgroundSize = 'cover';
			music_bg.style.backgroundPosition = 'center 30%';
		},

		getMusicInfo:function(data){
			
		},

		musicPlayByWebAudio:function(ret){
			
		},
	});
}
</script>

<div style="text-align:center;margin:-150px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
</div>
</body>
</html>

全部代码：HTML5带背景音乐播放器代码