diff options
| -rw-r--r-- | lib/room.js | 2 | ||||
| -rw-r--r-- | public/js/grid.js | 73 | ||||
| -rw-r--r-- | views/grid.ejs | 2 |
3 files changed, 47 insertions, 30 deletions
diff --git a/lib/room.js b/lib/room.js index abb1314..62e2e16 100644 --- a/lib/room.js +++ b/lib/room.js @@ -43,7 +43,7 @@ function Grid(){ } } base.setNote = function(data){ - if (data.step < pattern.length && data.channel < pattern[data.step].length) { + if (data.channel < pattern.length && data.step < pattern[data.channel].length) { var state = data.state == 1 ? 1 : 0; pattern[data.channel][data.step] = state; } diff --git a/public/js/grid.js b/public/js/grid.js index 3691adf..cc7c3a6 100644 --- a/public/js/grid.js +++ b/public/js/grid.js @@ -7,8 +7,13 @@ var audioletReady = false; var samples = [ 'KickDrum0001.wav', - 'Closed Hihat0001.wav', 'Open Hihat0001.wav', 'Clap.wav' - // 'Clav.wav', 'Mid Tom0001.wav', 'Rimshot.wav', 'SnareDrum0001.wav' + 'Clap.wav', + 'Closed Hihat0001.wav', + 'Open Hihat0001.wav', + 'SnareDrum0001.wav', + 'Clav.wav', + 'Mid Tom0001.wav', + 'Rimshot.wav', ]; function Sampler (audiolet, url) { @@ -16,24 +21,32 @@ function Sampler (audiolet, url) { this.audiolet = audiolet; // first get the sample and load it into a buffer - var buffer = new AudioletBuffer(1, 0); - buffer.load(url, false); - - // connect the buffer to a player and set up the objects we need - this.trigger = new TriggerControl(this.audiolet, 0); - this.player = new BufferPlayer(this.audiolet, buffer, 1, 0, 0); - this.gain = new Gain(this.audiolet, 0.50); + this.buffer = new AudioletBuffer(1, 0); + this.buffer.load(url, true, function(){ + + // connect the buffer to a player and set up the objects we need + + // TriggerControl: [initial trigger state = 0] + base.trigger = new TriggerControl(base.audiolet, 0); + + // BufferPlayer: [buffer] [playbackRate = 1] [startPosition = 0] [loop = 0] [onComplete] + base.player = new BufferPlayer(base.audiolet, base.buffer, 1, 0, 0); + base.player.playing = false; + + base.gain = new Gain(base.audiolet, 0.5); - // trigger -> player -> gain -> OUTPUT - this.trigger.connect(this.player, 0, 1); - this.player.connect(this.gain); - this.gain.connect(this.audiolet.output); + // trigger -> player -> gain -> OUTPUT + base.gain.connect(base.audiolet.output, 0); + base.player.connect(base.gain, 0); + base.trigger.connect(base.player, 0, 1); + + }); this.mute = function(){ base.gain.setValue(0); } this.unmute = function(){ - base.gain.setValue(0.80); + base.gain.setValue(0.5); } } @@ -45,16 +58,15 @@ function Sequencer (audiolet, instrument) { // building a sequencer ... // this makes each note a sixteenth note, and sets up an empty bar - var durations = new PSequence([0.25], Infinity); + var durations = new PSequence([0.30, 0.20], Infinity); var sequence = new PSequence(this.pattern, Infinity); - this.audiolet.scheduler.play([sequence], durations, trigger); - - function trigger (note, duration) { + this.audiolet.scheduler.play([sequence], durations, function (note, duration) { if (note == 1) { + base.instrument.player.playing = true; base.instrument.trigger.trigger.setValue(1); } - } + }); } function AudioletApp () { @@ -66,10 +78,13 @@ function AudioletApp () { var sample = "/wav/" + samples[i]; var sampler = new Sampler(this.audiolet, sample); var sequencer = new Sequencer(this.audiolet, sampler); + sequencer.sample = sample; this.sequencers.push(sequencer); } } +var Audio = new AudioletApp(); + function Grid (app){ var base = this; @@ -86,19 +101,19 @@ function Grid (app){ var playing = false; var playingInterval = false; - var tick = 125; + var tick; + var tempo = 125; + setTempo(tempo); var activecoloron = 'rgb(255,255,255)'; var activecoloroff = 'rgb(202,202,202)'; - var inactivecoloron = 'rgb(152,152,152)'; - var inactivecoloroff = 'rgb(28,28,28)'; + var inactivecoloron = 'rgb(52,52,54)'; + var inactivecoloroff = 'rgb(28,28,38)'; var gridSize = Math.floor(600/16); var lastStep = 16; - var channelCount = 4; + var channelCount = 8; var beat = lastStep-1; var inset = 5; - var Audio = new AudioletApp(); - var canvas = document.getElementById('canvas'); //.offset(); var ctx = canvas.getContext('2d'); init(); @@ -188,9 +203,11 @@ function Grid (app){ // Change the tempo function setTempo(tempo) { - if (tempo <= 1 || tempo >= 800) { + tempo = parseInt(tempo); + if (tempo <= 30 || tempo >= 300) { tempo = 120; } + Audio.audiolet.scheduler.setTempo(tempo); tick = (1000 / (tempo / 60)) / 4; $("#alertDisp").html( "Set tempo to " + tempo ); if (playing) { @@ -238,7 +255,7 @@ function Grid (app){ ctx.fillStyle = activecoloroff; } else { - ctx.fillStyle = inactivecoloroff; + ctx.fillStyle = step % 4 ? inactivecoloroff : inactivecoloron; } ctx.fillRect((step*gridSize) + inset, (channel*gridSize) + inset, gridSize - 2*inset, gridSize - 2*inset); } @@ -250,7 +267,7 @@ function Grid (app){ if (Audio.sequencers[channel].pattern[step] == 1) { ctx.fillStyle = activecoloroff; } else { - ctx.fillStyle = inactivecoloroff; + ctx.fillStyle = step % 4 ? inactivecoloroff : inactivecoloron; } ctx.fillRect((step*gridSize) + inset, (channel*gridSize) + inset, gridSize - 2*inset, gridSize - 2*inset); } diff --git a/views/grid.ejs b/views/grid.ejs index d15c9a4..04d8cb3 100644 --- a/views/grid.ejs +++ b/views/grid.ejs @@ -7,7 +7,7 @@ <style> * {padding: 0; margin: 0; font-family: menlo;} - header {display: block; background-color: #ddd;padding:10px; width: 300px; float: left; z-index: 2; position: relative;} + header {display: block; background-color: #ddd;padding:10px; width: 300px; float: left; z-index: 3; position: relative;} body {padding: 0; margin: 0; background: #444444; } #content { margin: 10px; position: relative; z-index: 2;} canvas { margin-top: 80px; } |