gl-matrix实现音频可视化动画效果代码

代码语言:html

所属分类:多媒体

代码描述:gl-matrix实现音频可视化动画效果代码,画面的太阳树木和小河都可单独设置跟随音频动画,效果炫酷。

代码标签: 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">
	&nbsp; &nbsp; Configurations<br />
	<br />
	Sensitivity:
	<div class="control-group">
		<label>&nbsp;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>&nbsp;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..........完整代码请登录后点击上方下载按钮下载查看

网友评论0