HTML5带背景音乐播放器代码
时间：2021-07-01 10:21:17 帮助过：0人阅读
HTML5带背景音乐播放器代码是一款简洁实用的音乐播放器，可以暂停播放下一首切换。
<head>
<meta charset="UTF-8">
<title>HTML5带背景音乐播放器代码 - mgtv素材</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>
<p>来源：<a href="https://www.mgtv.xyz" target="_blank">mgtv素材</a></p>
</div>
</body>