js实现音频三维可视化动画效果代码-html代码-BFW代码库

js实现音频三维可视化动画效果代码

代码语言：html

所属分类：多媒体

代码描述：js实现音频三维可视化动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        html, body, div {
          margin: 0;
          padding: 0;
          border: 0;
        }
        body {
          overflow: hidden;
          background-color:#000;
        }
        
        .bt {
        	-moz-box-shadow:inset 0px 1px 0px 0px #2c302e;
        	-webkit-box-shadow:inset 0px 1px 0px 0px #2c302e;
        	box-shadow:inset 0px 1px 0px 0px #2c302e;
        	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #909590), color-stop(1, #474a48));
        	background:-moz-linear-gradient(top, #909590 5%, #474a48 100%);
        	background:-webkit-linear-gradient(top, #909590 5%, #474a48 100%);
        	background:-o-linear-gradient(top, #909590 5%, #474a48 100%);
        	background:-ms-linear-gradient(top, #909590 5%, #474a48 100%);
        	background:linear-gradient(to bottom, #909590 5%, #474a48 100%);
        	background-color:#909590;
        	-moz-border-radius:3px;
        	-webkit-border-radius:3px;
        	border-radius:3px;
        	border:1px solid #2c302e;
        	display:inline-block;
        	cursor:pointer;
        	color:#ffffff;
        	font-family:Arial;
        	font-size:12px;
        	padding:4px 12px;
        	text-decoration:none;
        	text-shadow:0px 1px 0px #2c302e;
        }
        .bt:hover {
        	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #474a48), color-stop(1, #909590));
        	background:-moz-linear-gradient(top, #474a48 5%, #909590 100%);
        	background:-webkit-linear-gradient(top, #474a48 5%, #909590 100%);
        	background:-o-linear-gradient(top, #474a48 5%, #909590 100%);
        	background:-ms-linear-gradient(top, #474a48 5%, #909590 100%);
        	background:linear-gradient(to bottom, #474a48 5%, #909590 100%);
        	background-color:#474a48;
        }
        .bt:active {
        	position:relative;
        	top:1px;
        }
        
        input[type="file"] {
            display: none;
        }
        
        #menu {
          position: absolute;
          top: 10px;
          left: 10px;
        }
        
        #txtStatus {
          position: absolute;
          bottom: 0px;
          left: 10px;
          font-family:Arial;
          font-size: 12px;
          color: rgb(255,255,255);
        }
    </style>
</head>

<body>

    <div id="menu">
        <a id="btStartAudioVisualization" class="bt">启动音频可视化</a>
        <input id="btLoadAudio" type="file" accept="audio/*" /><label id="labelLoadAudio" for="btLoadAudio" class="bt">加载音频</label>
    </div>

    <p id="txtStatus"></p>

    <script>
        var audio, audioContext, audioSrc;
        var analyser, analyserBufferLength;
        var audioInfo = 'Song: LAKEY INSPIRED - Chill Day';
        
        //---
        
        var MATHPI2 = Math.PI * 2;
        
        //---
        
        var w;
        var h;
        
        var btStart;
        var btLoadAudio;
        var labelLoadAudio;
        var txtStatus;
        var canvas;
        var context;
        
        var imageData;
        var data;
        
        var mouseActive = false;
        var mouseDown = false;
        var mousePos = { x:0, y:0 };
        
        var fov = 250;
        
        var speed = 0.75;//0.25;
        
        var cubeMinHeight = 2;
        
        var frequencyDamp = 25;
        var smoothingTim.........完整代码请登录后点击上方下载按钮下载查看