Skip to content

Instantly share code, notes, and snippets.

@loktar00
Created December 30, 2012 21:58
Show Gist options
  • Select an option

  • Save loktar00/4415493 to your computer and use it in GitHub Desktop.

Select an option

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!
<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>
(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();
};
})();
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