Created
December 30, 2012 21:58
-
-
Save loktar00/4415493 to your computer and use it in GitHub Desktop.
A CodePen by Jason Brown. Messing around with the audio api - Spent way too long messing with this. Happy New year!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="attribution"> | |
| <a href="https://soundcloud.com/term-and-conditions-mixes/new-year-dubstep-minimix">New Year Dubstep Minimix By Terms and Conditions</a> | |
| </div><br/> | |
| <canvas id="playCanvas"></canvas> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| Math.seedrandom('particles'); | |
| function AudioFountain(){}; | |
| AudioFountain.prototype = new jGame({canvas : "playCanvas", width: window.innerWidth, height: window.innerHeight-45}); | |
| this.AudioFountain = AudioFountain; | |
| AudioFountain.prototype.load = function(){ | |
| this.init(); | |
| } | |
| AudioFountain.prototype.init = function(){ | |
| jGame.prototype.init.call(this); | |
| this.fountCount = 4; | |
| this.emitters = []; | |
| for(var i = 0; i < this.fountCount; i++){ | |
| this.emitters[i] = new Emitter({pos : {x : Math.random()*Game.bounds.width, y : Math.random()*Game.bounds.height}}); | |
| } | |
| new StarScape(); | |
| } | |
| AudioFountain.prototype.clicked = function(event, self){ | |
| jGame.prototype.clicked(event,self); | |
| } | |
| AudioFountain.prototype.update = function(){ | |
| jGame.prototype.update.call(this); | |
| for(var i = 0; i < this.fountCount; i++){ | |
| if(amplitude[i] > 50){ | |
| if(this.emitters[i].particleGroups.length == 0){ | |
| this.emitters[i].live = false; | |
| this.emitters[i] = new Emitter({pos : {x : Math.random()*Game.bounds.width, y : Math.random()*Game.bounds.height}}); | |
| this.emitters[i].addGroup({ | |
| size : 2, | |
| endSize : (amplitude[i]-50), | |
| thrustRange: {min:amplitude[i]/3, max:amplitude[i]/2}, | |
| angleRange : {min:0,max:360}, | |
| drawAngleRange : {min: 0, max: 360}, | |
| endAlpha: 0, | |
| startColor : {r: (Math.random()*200)+20, g:(Math.random()*200)+20, b:(Math.random()*200)+20}, | |
| endColor : {r: (Math.random()*200)+20, g:(Math.random()*200)+20, b:(Math.random()*200)+20}, | |
| duration : 150, | |
| rate: 5000, | |
| lifeTime : 1000, | |
| blend:false | |
| }); | |
| } | |
| } | |
| } | |
| } | |
| function Star(options){ | |
| Sprite.call(this, options); | |
| options = options || {}; | |
| this.speed = options.speed || 2; | |
| this.size = options.size || 2; | |
| this.bg = true; | |
| this.bgIndex = -1; | |
| } | |
| Star.prototype = new Sprite(); | |
| this.Star = Star; | |
| Star.prototype.update = function(deltaTime) | |
| { | |
| this.pos.x += this.vel.x * deltaTime; | |
| this.pos.y += this.vel.y * deltaTime; | |
| }; | |
| function StarScape(options){ | |
| var utilities = Game.utilities; | |
| this.live = true; | |
| this.curSpeedCheck = 0; | |
| this.curSpeedMult = 0; | |
| options = options || {}; | |
| this.width = options.width || Game.bounds.width; | |
| this.height = options.height || Game.bounds.height; | |
| var starNum = 200, | |
| curY = 0, | |
| curX = 0; | |
| this.starNum = starNum; | |
| this.stars = []; | |
| for(var s = 0; s < starNum; s++){ | |
| var curY = utilities.getRandomRange(0,this.height), | |
| curX = utilities.getRandomRange(0, this.width), | |
| curSpeed = utilities.fGetRandomRange(0.3, 1.5), | |
| curSize = utilities.getRandomRange(1,2); | |
| var star = new Star({width:curSize, height:curSize, x : curX, y :curY, size : curSize, speed: curSpeed}); | |
| this.stars.push(star); | |
| // Add entity to the renderer | |
| Game.addEntity(star); | |
| } | |
| Game.addEntity(this, true); | |
| } | |
| this.StarScape = StarScape; | |
| StarScape.prototype.getSprites = function(){ | |
| return this.stars; | |
| }; | |
| StarScape.prototype.update = function(deltaTime){ | |
| var soundmult = Math.abs(getAvgFFT())*5; | |
| this.curSpeedCheck++; | |
| if((soundmult*18) > this.curSpeedMult){ | |
| this.curSpeedMult +=50; | |
| }else{ | |
| if(this.curSpeedMult > 0){ | |
| this.curSpeedMult --; | |
| } | |
| } | |
| for(var star = 0; star < this.starNum; star++){ | |
| this.stars[star].vel.x = -(this.stars[star].speed * this.curSpeedMult); | |
| if(this.stars[star].pos.x <= 0){ | |
| this.stars[star].pos.x = this.width; | |
| } | |
| } | |
| }; | |
| /** | |
| // Sound Stuff | |
| */ | |
| var context = new webkitAudioContext(), | |
| amplitude = [], | |
| magnitude = [], | |
| maxvalue = []; | |
| for (a=0;a<1024;a++) { | |
| maxvalue[a] = 0; | |
| } | |
| currentvalue = new Array(); | |
| var frameBufferSize = 4096; | |
| var bufferSize = frameBufferSize/4; | |
| var signal = new Float32Array(bufferSize); | |
| var peak = new Float32Array(bufferSize); | |
| var fft = new FFT(bufferSize, 44100); | |
| function processAudio(e) { | |
| // Copy input arrays to output arrays to play sound | |
| var inputArrayL = event.inputBuffer.getChannelData(0); | |
| var inputArrayR = event.inputBuffer.getChannelData(1); | |
| var outputArrayL = event.outputBuffer.getChannelData(0); | |
| var outputArrayR = event.outputBuffer.getChannelData(1); | |
| var n = inputArrayL.length; | |
| for (var i = 0; i < n; ++i) { | |
| outputArrayL[i] = inputArrayL[i]; | |
| outputArrayR[i] = inputArrayR[i]; | |
| signal[i] = (inputArrayL[i] + inputArrayR[i]) / 2; // create data frame for fft - deinterleave and mix down to mono | |
| } | |
| fft.forward(signal); | |
| for (var i = 0, specLength = fft.spectrum.length; i < specLength; i++ ) { | |
| magnitude[i] = fft.spectrum[i]; | |
| } | |
| var buffDiv = bufferSize/64; | |
| for ( var i = 0; i < buffDiv; i++) { | |
| //currentvalue[i] = magnitude; | |
| amplitude[i] = fft.spectrum[i]*100; | |
| } | |
| } | |
| function getAvgFFT(){ | |
| var avgFFT = 0; | |
| for (i = 0; i < fft.spectrum.length; i++) { | |
| avgFFT += magnitude[i]; | |
| } | |
| return (avgFFT / fft.spectrum.length) * 100; | |
| } | |
| window.addEventListener('load', function() { | |
| var circle = document.getElementById('circle'); | |
| // Add an audio element | |
| var audio = new Audio(); | |
| audio.src = "http://www.somethinghitme.com/projects/aud/New Year Dubstep Minimix.ogg"; | |
| audio.controls = true; | |
| audio.preload = true; | |
| document.body.appendChild(audio); | |
| audio.addEventListener('canplaythrough', function() { | |
| var node = context.createMediaElementSource(audio), | |
| processor = context.createJavaScriptNode(bufferSize, 2, 2) | |
| processor.onaudioprocess = processAudio; | |
| node.connect(processor); | |
| processor.connect(context.destination); | |
| }); | |
| }); | |
| window.Game = {}; | |
| window.onload = function(){ | |
| Game = new AudioFountain(); | |
| Game.load(); | |
| }; | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{margin:0;height:100%;background:#000;} | |
| canvas{position:absolute;top:5;left:0;} | |
| .attribution{position:absolute;top:0;left:0;} | |
| .attribution a{color:#fff;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment