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

代码语言：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 smoothingTimeConstant = 0.65;
        var fftSize = 8192;//32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, 32768
        
        var circleHolder = [];
        
        var time = 0;
        
        var colorInvertValue = 0;
        
        var rgb = {};
            rgb.r = Math.random() * MATHPI2;
            rgb.g = Math.random() * MATHPI2;
            rgb.b = Math.random() * MATHPI2;
            
        var rgb2 = {};
            rgb2.r = Math.random() * MATHPI2;
            rgb2.g = Math.random() * MATHPI2;
            rgb2.b = Math.random() * MATHPI2;
        
        //---
        /*
        function getRGBColor() {
        
          var r = Math.sin( rgb.r += 0.010 ) * 1 + 1;
          var g = Math.sin( rgb.g += 0.007 ) * 1 + 1;
          var b = Math.sin( rgb.b += 0.013 ) * 1 + 1;
          //var r = Math.sin( rgb.r += 0.040 ) * 1 + 1;
          //var g = Math.sin( rgb.g += 0.028 ) * 1 + 1;
          //var b = Math.sin( rgb.b += 0.052 ) * 1 + 1;
        
          return { r:r, g:g, b:b };
        
        };*/
        
        function getRGBColor( color ) {
        
          var r = Math.sin( color.r += 0.010 ) * 1 + 1;
          var g = Math.sin( color.g += 0.007 ) * 1 + 1;
          var b = Math.sin( color.b += 0.013 ) * 1 + 1;
          //var r = Math.sin( color.r += 0.040 ) * 1 + 1;
          //var g = Math.sin( color.g += 0.028 ) * 1 + 1;
          //var b = Math.sin( color.b += 0.052 ) * 1 + 1;
        
          return { r:r, g:g, b:b };
        
        };
        
        function getRGBColor2( color ) {
        
          //var r = Math.sin( color.r += 0.010 ) * 1 + 1;
          //var g = Math.sin( color.g += 0.007 ) * 1 + 1;
          //var b = Math.sin( color.b += 0.013 ) * 1 + 1;
          var r = Math.sin( color.r += 0.040 ) * 1 + 1;
          var g = Math.sin( color.g += 0.028 ) * 1 + 1;
          var b = Math.sin( color.b += 0.052 ) * 1 + 1;
        
          return { r:r, g:g, b:b };
        
        };
        
        function limitRGBColor( color, percent = 0.45 ) {
        
          if ( color.r < percent ) {
          
            color.r = percent;
          
          }
          
          if ( color.g < percent ) {
          
            color.g = percent;
          
          }
          
          if ( color.b < percent ) {
          
            color.b = percent;
          
          }
        
        };
        
        function init() {
        
          canva.........完整代码请登录后点击上方下载按钮下载查看