Three.JS Audio Visualization

script.js

scene =
  tubeLength: 1000
  waveAmplitude: 10
  baseScale: 0.3
  baseRadius: 1
  scaleFactor: 1/200
PI2 = Math.PI * 2

colors =["#00A0B0","#6A4A3C","#CC333F","#EB6841","#EDC951"]

class Visualization
  
  constructor: ->
    @scene = new THREE.Scene()
    @camera = new THREE.PerspectiveCamera(75, window.innerWidth /   window.innerHeight, 0.1, 1500)
    @renderer = new THREE.WebGLRenderer(alpha: true)
    @renderer.setSize window.innerWidth, window.innerHeight
    document.body.appendChild @renderer.domElement
    @camera.position.z = 800
    
    geometry = new THREE.BoxGeometry(30, 30, 30)
    
    @cubes = []
    for i in [0..300] by 1
      
      parent = new THREE.Object3D()
      color = new THREE.Color()
      color.setHSL(Math.random(), .6, .5)
      color = new THREE.Color(colors[~~(Math.random()*colors.length)])
      
      mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial(color: color, shininess: 10))
      mesh.rotation.set(Math.random() * PI2, Math.random() * PI2, Math.random() * PI2)

      parent.add mesh
      @cubes.push
        mesh: mesh
        parent: parent
        offset: Math.random()
        rotation_offset: Math.PI * 2 * Math.random()
        
      @scene.add @cubes[i].parent
    
    @spotLight = new THREE.SpotLight(0xffffff)
    @spotLight.position.set 0, 0, 1500
    @scene.add @spotLight

    
    light = new THREE.AmbientLight( 0x222222 )
    @scene.add( light )
    
    
    @bands = [512..0]
    @wave = [512..0]

    
      
  update: ->
    for cube, index in @cubes
      cube.mesh.position.x = (cube.offset * scene.tubeLength) - (scene.tubeLength/2)
      cube.parent.rotation.x = cube.rotation_offset + Date.now()/1000
      
      # disturb this value
      #cube.mesh.position.y = 100 + Math.sin(Date.now()/150 + cube.offset*15) * 50
      scale = @bands[~~(cube.offset*512)]*scene.scaleFactor + scene.baseScale
      cube.mesh.scale.set(scale, scale, scale)
      
      cube.mesh.position.y = scene.baseRadius + @wave[~~(cube.offset*512)]*0.2 + Math.sin(Date.now()/150 + cube.offset*scene.waveAmplitude) * scene.waveAmplitude
      
  updateData: (bands, wave)->
    @bands = bands
    @wave = wave
    
  render: ->
    @renderer.render @scene, @camera


    
visualization = new Visualization()

(animationLoop = ->
 visualization.update()
 visualization.render()
 requestAnimationFrame animationLoop
)()

NUM_BANDS = 512
SMOOTHING = .5
MP3_PATH = 'https://api.soundcloud.com/tracks/66816170/stream?client_id=c280d0c248513cfc78d7ee05b52bf15e'

window.onload = ->
  analyser = new AudioAnalyser MP3_PATH, NUM_BANDS, SMOOTHING
  document.body.appendChild analyser.audio
  analyser.onUpdate = ( bands, wave ) =>
    visualization.updateData(bands, wave)
    
    
  #analyser.start()
  
  console.log dat
  
  gui = new dat.GUI()
  gui.add(scene, 'tubeLength', 0, 1000)
  gui.add(scene, 'waveAmplitude', 0, 30)
  gui.add(scene, 'baseScale', 0, 2)
  gui.add(scene, 'scaleFactor', 1/1000, 1/50)
  gui.add(scene, 'baseRadius', 0, 100)

scripts

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
<script src="http://codepen.io/codefendant/pen/760f8669dcaf28614f6b7a1e87ba1a20"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

style.css

body
  background: #3db6cc
  
audio
  position: absolute
  top: 10px
  left: 10px

Three.JS Audio Visualization.markdown

Three.JS Audio Visualization

A Pen by Che on CodePen.

License.