Audio Visualiser_final(withoutNoise&myWave)

by SQShu

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>My_Audio_Visualiser_SSQ</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Raleway:wght@300;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <!-- partial:index.partial.html -->
    <div id="content">

      <label for="thefile" class="file"> Visualize your audio
        <input type="file" id="thefile" accept="audio/*" />
      </label>

      <audio id="audio" controls></audio>
      <div id="container"></div>

    </div>
    <!-- partial -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js'></script>
    <script src='https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.3/dat.gui.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.3.0/simplex-noise.min.js'></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
    <script src="./script.js"></script>

  </body>

</html>

CSS

:root {
  --bgColor: rgba(255, 255, 255, 1);
  --bgColorLight: rgb(141, 153, 174);
  --textColor: rgb(41, 53, 74);
  --textColorDark: rgb(0,0,0);
  --paperColor: rgba(255, 255, 255, 0.2);
  --paperColorDark: rgba(255, 255, 255, 0.4);
  --shadowColorFaint: rgba(0,0,0,0.2);
}

::selected {
  color: var(--textColorDark);
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  background: var(--bgColor);
  background: linear-gradient(135deg, var(--bgColor), var(--bgColorLight));
  color: var(--textColor);
  font-family: 'Major Mono Display', monospace;
  position: relative;
}

* {
  box-sizing: border-box;
  transition: all 0.67s cubic-bezier(0.42, 0.54, 0.22, 1.26);
}

#canvas {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

audio {
  position: fixed;
  left: 10px;
  bottom: -60px;
  width: calc(100% - 20px);
}

audio.active {
  bottom: 10px;
}

#thefile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: 1;
}

label.file {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  padding: 1rem 2rem;
  border-radius: 120px;

  background: var(--paperColor);
  color: var(--textColor);
  font-size: 1.25em;
  font-weight: 700;
  box-shadow: 0 20px 60px var(--shadowColorFaint);

  cursor: pointer;
}


label.file:hover {
  background: var(--paperColorDark);
  transform: translate3d(-50%, -55%, 0);
}

label.file:active {
  background: var(--paperColorDark);
  transform: translate3d(-50%, -45%, 0);
}

label.file.normal {
  transform: translate3d(10%, 50%, 0);
  padding: 0.2rem 1rem;
  font-size: 1rem;
  top: 0;
  left: 0;
}

JavaScript

/* 1.13 把著色器顏色寫入了three.js中，留存的問題是：改寫的著色器無法正常顯示
    原因1: 著色器中存在沒有uniform的變量
    
   1.14 沒辦法，還是得自己寫新的著色器，尷尬了，看看能不能把mimic的Osc引入，把myWave給引入
*/


function vertexShader() {
    return `
        varying vec3 vUv; 
        uniform float u_time;
        uniform vec2 u_mouse;
    
        void main() {
           vUv = position; 
    
          vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0)*abs(sin(u_time));
          gl_Position = projectionMatrix * modelViewPosition * abs(cos(u_time)); 
        }
      `
  }
  
  function fragmentShader() {
    return `
      uniform float u_time;
      uniform vec2 u_resolution;
      varying vec3 vUv;
      #define PI 3.14159265358979323846
  
      void main() {
       // gl_FragColor = vec4(abs(sin(vUv.x+vUv.y) *  cos(u_time * PI) ),abs(abs(cos(vUv.x-vUv.y)) * cos(u_time)),abs(sin(vUv.x+vUv.y) * sin(u_time/20.0)),1.0);
        
       gl_FragColor = vec4(0.75-abs(cos((vUv.x+vUv.y+u_time*2.5))),abs(sin(u_time*10.0)/10.0), 1.0-sin(u_time)/PI/2.0-abs(sin(vUv.z+vUv.x*5.0+u_time*1.0)),1.0);
       
  //   float  p = pow(vUv.x,vUv.y);
  //   float  q = pow(vUv.x,vUv.x);
  
      //  gl_FragColor = vec4(0.7-abs(cos((vUv.x+vUv.y)/sin(vUv.z)/p)),abs(sin(u_time)/10.0), 1.0-abs(sin(vUv.x+vUv.y*5.0)),1.0);
      
     // gl_FragColor = vec4(0.75*abs(sin((sin(vUv.x)+cos(vUv.y)+u_time*2.0))),abs(sin(u_time*10.0)/10.0), 0.75-abs(cos((cos(vUv.x)+sin(vUv.y)+u_time*2.0))),.0);
     
   //  vec3 light = vec3(1.0-tan(sin(vUv.y*0.005+vUv.z*vUv.x)), 0.5+cos(u_time*5.0)*0.5+acos(tan(vUv.x*5.0+vUv.y*vUv.z)), abs(sin(u_time/PI)*vUv.x*vUv.y));
   //   gl_FragColor = vec4(light, 0.75);
  
     
      }
  `
  }
  
  
  
  
  
  //initialise simplex noise instance 創建一些簡單的噪音實例
  var noise = new SimplexNoise();
  
  // the main visualiser function 可視化的主函數
  var vizInit = function() {
  
    var file = document.getElementById("thefile"); // 接收上傳文件
    var audio = document.getElementById("audio"); // 接收音頻
    var fileLabel =...