websynth

a currently single-user web synth

HTML

<script src="http://enigma-dev.org/site/a/audiolet/Audiolet.js"></script>
<script src="http://enigma-dev.org/site/knob.js"></script>
<link rel="stylesheet" href="http://enigma-dev.org/site/kK.css">
<script src="http://enigma-dev.org/site/kK.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="key_select">
    <div id="keylbl">transpose: </div>
    <div id="tonalitylbl">tonality: </div>
</div>    
<div id="synth">
    <div id="attack" class="knob">A</div>
    <div id="decay" class="knob">D</div>
    <div id="sustain" class="knob">S</div>
    <div id="release" class="knob">R</div>
</div>
<br/><br/><br/><br/><hr/>
<input id="trigger" value="Trigger!" type="button" /><br />
<input id="kill" value="Kill it!" type="button" /><br />
BPM: <div id="bpm_disp">100</div><div id="bpm" class="slider" value="100"></div>
<div id="adsr">
    Attack: <div id="attack_val">0.1</div> seconds<br />
    Decay: <div id="decay_val">0.1</div> seconds<br />
    Sustain Level: <div id="sustain_val">0.1</div><br />
    Release: <div id="release_val">0.1</div> seconds<br />
</div>
<div id="debug"></div>

CSS

.knob { display: inline; padding-left: 10%;; }
#tonalitylbl {
    display: block;
    width: 100px;
    height: 100px;
}
#bpm_disp {
    display: inline;
}
#adsr div { display: inline; }

JavaScript

var ChromaticScale = function() {
    Scale.call(this, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
};
extend(ChromaticScale, Scale);
var Synth = function(audiolet, base, mod, op, env, env_t) {
    AudioletGroup.apply(this, [audiolet, 0, 1]);
    base.audiolet = this.audiolet;
    mod.audiolet = this.audiolet;
    op.audiolet = this.audiolet;
    this.envelope = env || new ADSREnvelope(this.audiolet, 1, 0, 0, 0, 0);
    this.envelope.onComplete = function() {
        this.audiolet.scheduler.addRelative(0, function() {
            this.remove.bind();
        })
    };
    this.env_t = env_t || new Gain(this.audiolet);
    this.envelope.audiolet = this.audiolet;
    this.env_t.audiolet = this.audiolet;
    this.base = base;
    this.modulator = mod;
    this.operator = op;
    this.modulator.connect(this.operator);
    this.operator.connect(this.base);
    this.envelope.connect(this.env_t, 0, 1);
    this.base.connect(this.env_t);
    this.out = this.outputs[0];
    this.dc = function() {
        this.env_t.disconnect(this.out);
    }
    this.c = function() {
        this.env_t.connect(this.out);
    }
    this.attack = function(a) {
        if (a) {
            this.envelope.attack.value = a;
        };
        return this.envelope.attack.value;
    }
    this.decay = function(a) {
        if (a) {
            this.envelope.decay.value = a;
        };
        return this.envelope.sustain.value;
    }
    this.sustain = function(a) {
        if (a) {
            this.envelope.sustain.value = a;
        };
        return this.envelope.decay.value;
    }
    this.release = function(a) {
        if (a) {
            this.envelope.release.value = a;
        };
        return this.envelope.release.value;
    }
}


extend(Synth, AudioletGroup);

var App = function(transpose, tonality) {
    this.audiolet = new Audiolet();
    this.scale = new Scale();
    this.MAJOR = 2;
    this.MINOR = 1;
    this.CHROMATIC = 0;
    this.tonality = this.MAJOR;
    this.octave = 2;
   ...