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..........完整代码请登录后点击上方下载按钮下载查看
网友评论0