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 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() {
canvas = document.createElement( 'canvas' );
canvas.addEventListener( 'mousedown', mouseDownHandler, false );
canvas.addEventListener( 'mouseup', mouseUpHandler, false );
canvas.addEventListener( 'mousemove', mouseMoveHandler, false );
canvas.addEventListener( 'mouseenter', mouseEnterHandler, false );
canvas.addEventListener( 'mouseleave', mouseLeaveHandler, false );
document.body.appendChild( canvas );
context = canvas.getContext( '2d' );
window.addEventListener( 'resize', onResize, false );
onResize();
addCircles();
render();
clearImageData();
render();
context.putImageData( imageData, 0, 0 );
btStart = document.getElementById( 'btStartAudioVisualization' );
btStart.addEventListener( 'mousedown', userStart, false );
btLoadAudio = document.getElementById( 'btLoadAudio' );
btLoadAudio.addEventListener( 'change', loadAudioFileHandler, false );
labelLoadAudio = document.getElementById( 'labelLoadAudio' );
labelLoadAudio.style.display = 'none';
txtStatus = document.getElementById( 'txtStatus' );
txtStatus.innerHTML = 'Waiting Patiently For You... Please Click the Start Button.';
};
//---
function userStart() {
btStart.removeEventListener( 'mousedown', userStart );
btStart.addEventListener( 'mousedown', audioBtHandler, false );
btStart.innerHTML = 'Pause Audio';
btStart.style.display = 'none';
txtStatus.innerHTML = 'Loading Audio...';
audioSetup( '//repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3' );
animate();
};
//---
function audioSetup( url ) {
if ( audio ) {
audio.pause();
}
audio = new Audio();
audio.src = url;
audio.controls = false;
audio.loop = true;
audio.autoplay = true;
audio.crossOrigin = 'anonymous';
audio.addEventListener( 'canplaythrough', audioLoaded, false );
audioContext = new ( window.AudioContext || window.webkitAudioContext )();
analyser = audioContext.createAnalyser();
analyser.connect( audioContext.destination );
analyser.smoothingTimeConstant = smoothingTimeConstant;
analyser.fftSize = fftSize;
analyserBufferLength = analyser.frequencyBinCount;
audioSrc = audioContext.createMediaElementSource( audio );
audioSrc.connect( analyser );
};
function audioLoaded( e ) {
txtStatus.innerHTML = audioInfo;
btStart.style.display = 'inline-block';
labelLoadAudio.style.display = 'inline-block';
};
function loadAudioFileHandler( e ) {
loadFile( e );
};
function loadFile( e ) {
var input = e.target;
var reader = new FileReader();
audioInfo = input.files[ 0 ].name;
audioSetup( URL.createObjectURL( input.files[ 0 ] ) );
};
//---
function clearImageData() {
for ( var i = 0, l = data.length; i < l; i += 4 ) {
data[ i ] = 0;
data[ i + 1 ] = 0;
data[ i + 2 ] = 0;
data[ i + 3 ] = 255;
}
};
function setPixel( x, y, r, g, b, a ) {
var i = ( x + y * imageData.width ) * 4;
data[ i ] = r;
data[ i + 1 ] = g;
data[ i + 2 ] = b;
data[ i + 3 ] = a;
};
//---
function drawLine( x1, y1, x2, y2, r, g, b, a ) {
var dx = Math.abs( x2 - x1 );
var dy = Math.abs( y2 - y1 );
var sx = ( x1 < x2 ) ? 1 : -1;
var sy = ( y1 < y2 ) ? 1 : -1;
var err = dx - dy;
var lx = x1;
var ly = y1;
while ( true ) {
if ( lx > 0 && lx < w && ly > 0 && ly < h ) {
setPixel( lx, ly, r, g, b, a );
}
if ( ( lx === x2 ) && ( ly === y2 ) )
break;
var e2 = 2 * err;
if ( e2 > -dx ) {
err -= dy;
lx += sx;
}
if ( e2 < dy ) {
err += dx;
ly += sy;
}
}
};
//---
function getCirclePosition( centerX, centerY, radius, index, segments ) {
var angle = index * ( MATHPI2 / segments ) + time;
var x = centerX + Math.cos( angle ) * radius;
var y = centerY + Math.sin( angle ) * radius;
return { x:x, y:y };
};
function drawCircle( centerPosition, radius, segments ) {
var coordinates = [];
var radiusSave;
var diff = 0;//Math.floor( Math.random() * segments );
for ( var i = 0; i <= segments; i++ ) {
//var radiusRandom = radius + Math.random() * ( radius / 8 );
//var radiusRandom = radius + Math.random() * ( radius / 32 );
var radiusRandom = radius;// + ( radius / 8 );
if ( i === 0 ) {
radiusSave = radiusRandom;
}
if ( i === segments ) {
radiusRandom = radiusSave;
}
var centerX = centerPosition.x;
var centerY = centerPosition.y;
var position = getCirclePosition( centerX, centerY, radiusRandom, i, segments );
coordinates.push( { x:position.x, y:position.y, index:i + diff, radius:radiusRandom, segments:segments } );
}
return coordinates;
};
function addCircleSegment( x, y, z, audioBufferIndex ) {
var circleSegment = {};
circleSegment.x = x;
circleSegment.y = y;
//circleSegment.z = z;
circleSegment.x2d = 0;
circleSegment.y2d = 0;
circleSegment.audioBufferIndex = audioBufferIndex;
return circleSegment;
};
function addCircles() {
var audioBufferIndexMin = 8;
var audioBufferIndexMax = 1024;
var audioBufferIndex = audioBufferIndexMin;
var centerPosition = { x:0, y:0 };
var center = { x:0, y:0 };
var toggle = 1;
var index = 0;
var audioIndex = audioBufferIndexMin;
var mp = { x:Math.random() * w, y:Math.random() * h };
for ( var z = -fov; z < fov; z += 5 ) {
var coordinates = drawCircle( centerPosition, 75, 64 );
var circleObj = {};
circleObj.segmentsOutside = [];
circleObj.segmentsInside = [];
circleObj.segmentsInside2 = [];
circleObj.segmentsCount = 0;
circleObj.index = index;
//circleObj.audioIndex = audioIndex;
circleObj.z = z;
circleObj.center = center;
circleObj.circleCenter = { x:0, y:0 };
circleObj.mp = { x:mp.x, y:mp.y };
circleObj.radius = coordinates[ 0 ].radius;
//circleObj.radiusAudio = circleObj.radius;
circleObj.color = { r:0, g:0, b:0 };
//toggle = index % 4;
toggle = index % 2;
index++;
if ( z < 0 ) {
audioIndex++;
} else {
audioIndex--;
}
audioBufferIndex = Math.floor( Math.random() * audioBufferIndexMax ) + audioBufferIndexMin;
//audioBufferIndex = audioBufferIndexMin;
var circleSegmentOutside;
for ( var i = 0, l = coordinates.length; i < l; i++ ) {
var coordinate = coordinates[ i ];
//if ( i % 4 === toggle && i % 2 === 1 ) {
if ( i % 2 === toggle ) {
circleSegmentOutside = addCircleSegment( coordinate.x, coordinate.y, z, audioBufferIndex );
circleSegmentOutside.active = true;
circleSegmentOutside.index = coordinate.index;
circleSegmentOutside.radius = coordinate.radius;
circleSegmentOutside.radiusAudio = circleSegmentOutside.radius;// + Math.random() * 15;
circleSegmentOutside.segments = coordinate.segments;
circleSegmentOutside.coordinates = [];
var co;
if ( i > 0 ) {
co = coordinates[ i - 1 ];
} else {
co = coordinates[ l - 1 ];
}
var sub1 = addCircleSegment( co.x, co.y, z, audioBufferIndex );
var sub2 = addCircleSegment( coordinate.x, coordinate.y, z - 5, audioBufferIndex );
var sub3 = addCircleSegment( co.x, co.y, z - 5, audioBufferIndex );
var sub4 = addCircleSegment( coordinate.x, coordinate.y, z, audioBufferIndex );
var sub5 = addCircleSegment( co.x, co.y, z, audioBufferIndex );
var sub6 = addCircleSegment( coordinate.x, coordinate.y, z - 5, audioBufferIndex );
var sub7 = addCircleSegment( co.x, co.y, z - 5, audioBufferIndex );
sub1.index = co.index;
sub2.index = coordinate.index;
sub3.index = co.index;
sub4.index = coordinate.index;
sub5.index = co.index;
sub6.index = coordinate.index;
sub7.index = co.index;
circleSegmentOutside.subs = [];
circleSegmentOutside.subs.push( sub1, sub2, sub3, sub4, sub5, sub6, sub7 );
//audioBufferIndex = Math.floor( Math.random() * audioBufferIndexMax ) + audioBufferIndexMin;
if ( i < l - 1 ) {
audioBufferIndex = Math.floor( Math.random() * audioBufferIndexMax ) + audioBufferIndexMin;
} else {
audioBufferIndex = circleObj.segmentsOutside[ 0 ].audioBufferIndex;
}
circleObj.segmentsOutside.push( circleSegmentOutside );
} else {
circleObj.segmentsOutside.push( { active:false } );
}
}
circleHolder.push( circleObj );
}
};
//---
function onResize(){
w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
h = window.innerHeight || document.documen.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0