前端JS特效第14集：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/">

<link rel="stylesheet" href="fonts/">

<link rel="stylesheet" type="text/css" href="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/"></script>

<script type="text/javascript" src="js/"></script>

<script type="text/javascript">

= function(){

({

hasAjax:false,

left:'50%',

bottom:'50%',

musicChanged:function(ret){

// alert();

// getMusic_buffer();

			// return;

			var data = ret.data;

			var index = ret.index;

			var imageUrl = data[index].img_url;

var music_bg = ('music-bg');

			music_bg. = 'url('+imageUrl+')no-repeat';

music_bg. = 'cover';

music_bg. = '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>

秒客网