时间:2021-07-01 10:21:17 帮助过:0人阅读
<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>