gl-matrix实现音频可视化动画效果代码
代码语言：html
所属分类：多媒体
代码描述：gl-matrix实现音频可视化动画效果代码，画面的太阳树木和小河都可单独设置跟随音频动画，效果炫酷。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Space+Mono&display=swap");
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #1a1a1a;
color: #ffffff;
font-family: "Space Mono", sans-serif;
//font-size: 0.8rem;
}
canvas {
width: 100%;
height: 100%;
}
#playPause {
font-family: "Space Mono", sans-serif;
font-size: 1.0rem;
}
#audioLabel {
background: #444;
}
#disclaim {
background: #0000;
font-size: 0.75rem;
}
#controls {
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
border-radius: 5px;
transition: all 0.3s ease;
}
#controls.hidden {
transform: translateX(-110%);
}
#toggleControls {
position: absolute;
top: 15px;
left: 15px;
z-index: 11;
background-color: rgba(0, 0, 0, 0.7);
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
input[type="file"] {
display: none;
}
label, button {
background-color: #3498db;
color: white;
padding: 3px 10px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
}
label:hover, button:hover {
background-color: #2980b9;
}
select, input[type="range"] {
margin: 5px 0;
padding: 5px;
}
.control-group {
margin-bottom: 10px;
}
</style>
</head>
<body translate="no">
<button id="toggleControls">☰</button>
<div id="controls">
Configurations<br />
<br />
Sensitivity:
<div class="control-group">
<label> Sun: </label>
<select id="sunControl">
<option value="bass">Bass</option>
<option value="mid">Mids</option>
<option value="treble">Treble</option>
</select>
<input type="range" id="sunSensitivity" min="0" max="100" value="50">
</div>
<div class="control-group">
<label>Tree: </label>
<select id="treeControl">
<option value="bass">Bass</option>
<option value="mid" selected>Mids</option>
<option value="treble">Treble</option>
</select>
<input type="range" id="treeSensitivity" min="0" max="100" value="50">
</div>
<div class="control-group">
<label> Sky: </label>
<select id="skyControl">
<option value="bass">Bass</option>
<option value="mid">Mids</option>
<option value="treble" selected>Treble</option>
</select>
<input type="range" id="skySensitivity" min="0" max="100" value="50">
</div>
<div class="control-group">
<label>Wave: </label>
<select id="wavesControl">
<option value="bass" selected>Bass</option>
<option value="mid">Mids</option>
<option value="treble">Treble</option>
</select>
<input type="range" id="wavesSensitivity" min="0" max="100" value="50">
</div>
<br />
<label for="audioUpload" id="audioLabel">Upload Audio</label>
<input type="file" id="audioUpload" accept="audio/*">
<button id="playPause">Play/Pause</button><br />
<label id="disclaim">Upload audio to start the show...</label>
</div>
<canvas id="glCanvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gl-matrix-min.js"></script>
<script id="vs" type="x-shader/x-vertex">
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
</script>
<script id="fs" type="x-shader/x-fragment">
precision highp float;
uniform vec2 iResolution;
uniform float iTime;
uniform float iAudioLow;
uniform float iAudioMid;
uniform float iAudioHigh;
uniform int iSunControl;
uniform int iTreeControl;
uniform int iSkyControl;
uniform int iWavesControl;
uniform float iSunSensitivity;
uniform float iTreeSensitivity;
uniform float iSkySensitivity;
uniform float iWavesSensitivity;
uniform vec3 iColorShift;
#define p(t, a, b, c, d) ( a + b*cos( 6.28318*(c*t+d) ) )
#define sp(t) p(t,vec3(.26,.76,.77),vec3(1,.3,1),vec3(.8,.4,.7),vec3(0,.12,.54))
#define hue(v) ( .6 + .76 * cos(6.3*(v) + vec4(0,23,21,0) ) )
float hash12(vec2 p) {
vec3 p3 = fract(vec3(p.xyx) * .1031);
p3 += dot(p3, p3.yzx + 33.33);
return fract((p3.x + p3.y) * p3.z);
}
vec2 hash22(vec2 p) {
vec3 p3 = fract(vec3(p.xyx) * vec3(.1031, .1030, .0973));
p3 += dot(p3, p3.yzx+33.33);
return fract((p3.xx+p3.yz)*p3.zy);
}
vec2 rotate2D(vec2 st, float a) {
return mat2(cos(a),-sin(a),sin(a),cos(a))*st;
}
float st(float a, float b, float s) {
return smoothstep(a-s, a+s, b);
}
float noise(in vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
vec2 u = f*f*(3.-2.*f);
return mix(mix(dot(hash22(i+vec2(0,0)), f-vec2(0,0)),
dot(hash22(i+vec2(1,0)), f-vec2(1,0)), u.x),
mix(dot(hash22(i+vec2(0,1)), f-vec2(0,1)),
dot(hash22(i+vec2(1,1)), f-vec2(1,1)), u.x), u.y);
}
float getAudioValue(int control) {
if (control == 0) return iAudioLow;
if (control == 1) return iAudioMid;
return iAudioHigh;
}
void mainImage(out vec4 O, in vec2 g) {
vec2 r = iResolution.xy
,uv = (g+g-r)/r.y
,sun_pos = vec2(r.x/r.y*.42,-.53)
,tree_pos = vec2(-r.x/r.y*.42,-.2)
,sh, u, id, lc, t;
vec3 f, c;
float xd, yd, h, a, l;
vec4 C;
float sm = 3./r.y;
// Enhanced audio reactive modifications
sun_pos.y += getAudioValue(iSunControl) * 0.2 * iSunSensitivity;
tree_pos.x += getAudioValue(iTreeControl) * 0.1 * iTreeSensitivity;
sh = rotate2D(sun_pos, noise(uv+iTime*.25)*.3);
if (uv.y > -.4) {
u = uv + sh;
yd = 60. + getAudioValue(iSkyControl) * 40. * iSkySensitivity;
id = vec2((length(u)+.01)*yd,0);
xd = floor(id.x)*.09;
h = (hash12(floor(id.xx))*.5+.25)*(iTime+10.)*.25;
t = rotate2D(u,h);
id.y = atan(t.y,t.x)*xd;
lc = fract(id);
id -= lc;
t = vec2(cos((id.y+.5)/xd)*(id.x+.5)/yd,sin((id.y+.5)/xd)*(id.x+.5)/yd);
t = rotate2D(t,-h) - sh;
h = noise(t*vec2(.5,1)-vec2(iTime*.2,0))
* step(-.25,t.y);
h = smoothstep(.052,.055, h);
lc += (noise(lc*vec2(1,4)+id))*vec2(.7,.2);
f = mix(sp(sin(length(u)-.1))*.35,
mix(sp(sin(length(u)-.1)+(hash12(id)-.5)*.15),vec3(1),h),
st(abs(lc.x-.5),.4,sm*yd)*st(abs(lc.y-.5),.48,sm*xd));
// Add enhanced audio reactive color to the sky
f += vec3(iAudioLow, iAudioMid, iAudioHigh) * 0.2 * iSkySensitivity;
}
if (uv.y < -.35) {
float cld = noise(-sh*vec2(.5,1) - vec2(iTime*.2,0));
cld = 1.- smoothstep(.0,.15,cld)*.5;
u = uv*vec2(1,15);
id = floor(u);
for (float i = 1.; i > -1.; i--) {
if (id.y+i < -5.) {
lc = fract(u)-.5;
lc.y = (lc.y+(sin(uv.x*12.-iTime*3.+id.y+i))*.25-i)*4.;
h = hash12(vec2(id.y+i,floor(lc.y)));
xd = 6.+h*4.;
yd = 30.;
lc.x = uv.x*xd+sh.x*9.;
lc.x += sin(iTime * (.5 + h*2.))*.5;
h = .8*smoothstep(5.,.0,abs(floor(lc.x)))*cld+.1;
f = mix(f,mix(vec3(0,.1,.5),vec3(.35,.35,0),h),st(lc.y,0.,sm*yd));
lc += noise(lc*vec2(3,.5))*vec2(.1,.6);
f = mix(f,
mix(hue(hash12(floor(lc))*.1+.56).rgb*(1.2+floor(lc.y)*.17),vec3(1,1,0),h)
,st(lc.y,0.,sm*xd)
*st(abs(fract(lc.x)-.5),.48,sm*xd)*st(abs(fract(lc.y)-.5),.3,sm*yd)
);
}
}
// Enhanced waves based on audio
float waveIntensity = getAudioValue(iWavesControl) * 0.4 * iWavesSensitivity;
f += vec3(0.0, 0.0, waveIntensity) * step(uv.y, -0.4 + sin(uv.x * 20.0 + iTime * (1.0 + waveIntensity)) * (0.05 + waveIntensity * 0.05));
}
O = vec4(f,1);
a = 0.;
u = uv+noise(uv*2.)*.1 + vec2(0,sin(uv.x*1.+3.)*.4+.8);
f = mix(vec3(.7,.6,.2),vec3(0,1,0),sin(iTime*.2)*.5+.5);
O = mix(O,vec4(f*.4,1),step(u.y,.0));
xd = 60.;
u = u*vec2(xd,xd/3.5);
if (u.y < 1.2) {
for (float y = 0.; y > -3.; y--) {
for (float x = -2.; x <3.; x++) {
id = floor(u) + vec2(x,y);
lc = (fract(u) + vec2(1.-x,-y))/vec2(5,3);
h = (hash12(id)-.5)*.25+.5;
lc-= vec2(.3,.5-h*.4);
lc.x += sin(((iTime*1.7+h*2.-id.x*.05-id.y*.05)*1.1+id.y*.5)*2.)*(lc.y+.5)*.5;
t = abs(lc)-vec2(.02,.5-h*.5);
l = length(max(t,0.)) + min(max(t.x,t.y),0.);
l -= noise(lc*7.+id)*.1;
C = vec4(f*.25,st(l,.1,sm*xd*.09));
C = mix(C,vec4(f
*(1.2+lc.y*2.)
*(1.8-h*2.5),1.)
,st(l,.04,sm*xd*.09));
O = mix(O,C,C.a*step(id.y,-1.));
a = max(a, C.a*step(id.y,-5.));
}
}
}
float T = sin(iTime*.5 + getAudi.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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