├── .editorconfig
├── .gitignore
├── LICENSE
├── README.md
├── adsrnode.js
├── debugger.html
└── demo.html


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # see: http://editorconfig.org
 2 | #
 3 | # (c) Copyright 2017, Sean Connelly (@voidqk), http://syntheti.cc
 4 | # MIT License
 5 | 
 6 | root = true
 7 | 
 8 | [*]
 9 | end_of_line = lf
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 | charset = utf-8
13 | indent_style = tab
14 | indent_size = 4
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # random crap that tends to appear over time
 2 | Thumbs.db
 3 | .DS_Store
 4 | .DS_Store?
 5 | *.bak
 6 | *~
 7 | *#
 8 | *.orig
 9 | desktop.ini
10 | *.swp
11 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Sean Connelly (@voidqk, web: sean.cm)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ADSRNode
  2 | ========
  3 | 
  4 | ADSRNode is a single JavaScript function that creates an ADSR envelope for use in WebAudio.
  5 | 
  6 | * [Demo](https://rawgit.com/voidqk/adsrnode/master/demo.html)
  7 | 
  8 | Usage
  9 | -----
 10 | 
 11 | ### ADSRNode(*audioCtx*, *opts*)
 12 | 
 13 | ```javascript
 14 | // create the Audio Context
 15 | var ctx = new AudioContext();
 16 | 
 17 | // simple ADSR envelope
 18 | var envelope = ADSRNode(ctx, {
 19 |   attack:  0.1, // seconds until hitting 1.0
 20 |   decay:   0.2, // seconds until hitting sustain value
 21 |   sustain: 0.5, // sustain value
 22 |   release: 0.3  // seconds until returning back to 0.0
 23 | });
 24 | 
 25 | // advanced ADSR envelope
 26 | var envelope = ADSRNode(ctx, {
 27 |   base:         5.0, // starting/ending value (default: 0)
 28 |   attack:       0.2, // seconds until hitting peak value (default: 0)
 29 |   attackCurve:  0.0, // amount of curve for attack (default: 0)
 30 |   peak:         9.0, // peak value (default: 1)
 31 |   hold:         0.3, // seconds to hold at the peak value (default: 0)
 32 |   decay:        0.4, // seconds until hitting sustain value (default: 0)
 33 |   decayCurve:   5.0, // amount of curve for decay (default: 0)
 34 |   sustain:      3.0, // sustain value (required)
 35 |   release:      0.5, // seconds until returning back to base value (default: 0)
 36 |   releaseCurve: 1.0  // amount of curve for release (default: 0)
 37 | });
 38 | ```
 39 | 
 40 | The returned `envelope` object is a
 41 | [ConstantSourceNode](https://developer.mozilla.org/en-US/docs/Web/API/ConstantSourceNode).
 42 | 
 43 | It can be connected to other nodes using the normal
 44 | [envelope.connect(...)](https://developer.mozilla.org/en-US/docs/Web/API/AudioNode/connect) and
 45 | [envelope.disconnect(...)](https://developer.mozilla.org/en-US/docs/Web/API/AudioNode/disconnect)
 46 | functions.
 47 | 
 48 | It must be started with
 49 | [envelope.start()](https://developer.mozilla.org/en-US/docs/Web/API/AudioScheduledSourceNode/start),
 50 | to begin outputting the `base` value.  It can be stopped with
 51 | [envelope.stop()](https://developer.mozilla.org/en-US/docs/Web/API/AudioScheduledSourceNode/stop).
 52 | 
 53 | The following methods/properties are added to the object:
 54 | 
 55 | ### *envelope*.trigger([*when*])
 56 | 
 57 | Trigger the envelope.
 58 | 
 59 | The `when` parameter is optional.  It's the time, in seconds, at which the envelope should trigger.
 60 | It is the same time measurement as
 61 | [AudioContext.currentTime](https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/currentTime),
 62 | just like many other functions that take timed events.  I.e., to trigger in two seconds, you
 63 | would do: `envelope.trigger(ctx.currentTime + 2)`.  If omitted, it will trigger immediately.
 64 | 
 65 | ### *envelope*.release([*when*])
 66 | 
 67 | Release a triggered envelope.
 68 | 
 69 | The `when` parameter behaves just like `envelope.trigger`.
 70 | 
 71 | ### *envelope*.reset()
 72 | 
 73 | Reset an envelope immediately (i.e., output `base` value and wait for a trigger).
 74 | 
 75 | ### *envelope*.update(*opts*)
 76 | 
 77 | Update the values of the ADSR curve.  All keys are optional.  For example, to just update the
 78 | peak, use `envelope.update({ peak: 2 })`.
 79 | 
 80 | Updating the envelope will also `reset` it.
 81 | 
 82 | ### *envelope*.baseTime
 83 | 
 84 | This value is set after an `envelope.release(...)` to provide the exact moment (in absolute seconds)
 85 | that the envelope will return to the base value.
 86 | 
 87 | Triggering and Releasing
 88 | ------------------------
 89 | 
 90 | [Special care](https://rawgit.com/voidqk/adsrnode/master/debugger.html) has been taken to ensure the
 91 | envelope correctly responds to triggering and releasing while still outputting a partial envelope.
 92 | 
 93 | For example, if a trigger happens in the middle of the release phase, the attack will pick up where
 94 | the release left off -- as it should.  Or if a release happens during the attack phase, it will
 95 | correctly apply the release curve where the attack left off, etc.
 96 | 
 97 | The only requirement from users of the library is to ensure calls to `trigger` and `release` happen
 98 | in chronological order.
 99 | 
100 | For example, the following will fail, because it attempts to insert a trigger *before* a future
101 | trigger:
102 | 
103 | ```javascript
104 | // this FAILS
105 | envelope.trigger(8); // schedule trigger at 8 second mark
106 | envelope.trigger(5); // schedule trigger at 5 second mark (error!)
107 | ```
108 | 
109 | This is easily fixed by simply ordering the calls:
110 | 
111 | ```javascript
112 | // valid
113 | envelope.trigger(5);
114 | envelope.trigger(8);
115 | ```
116 | 


--------------------------------------------------------------------------------
/adsrnode.js:
--------------------------------------------------------------------------------
  1 | // (c) Copyright 2018, Sean Connelly (@voidqk), http://sean.cm
  2 | // MIT License
  3 | // Project Home: https://github.com/voidqk/adsrnode
  4 | 
  5 | (function(){
  6 | 
  7 | var DEBUG = false;
  8 | 
  9 | function ADSRNode(ctx, opts){
 10 | 	// `ctx` is the AudioContext
 11 | 	// `opts` is an object in the format:
 12 | 	// {
 13 | 	//   base:         <number>, // output     optional    default: 0
 14 | 	//   attack:       <number>, // seconds    optional    default: 0
 15 | 	//   attackCurve:  <number>, // bend       optional    default: 0
 16 | 	//   peak:         <number>, // output     optional    default: 1
 17 | 	//   hold:         <number>, // seconds    optional    default: 0
 18 | 	//   decay:        <number>, // seconds    optional    default: 0
 19 | 	//   decayCurve:   <number>, // bend       optional    default: 0
 20 | 	//   sustain:      <number>, // output     required
 21 | 	//   release:      <number>, // seconds    optional    default: 0
 22 | 	//   releaseCurve: <number>  // bend       optional    default: 0
 23 | 	// }
 24 | 
 25 | 	function getNum(opts, key, def){
 26 | 		if (typeof def === 'number' && typeof opts[key] === 'undefined')
 27 | 			return def;
 28 | 		if (typeof opts[key] === 'number')
 29 | 			return opts[key];
 30 | 		throw new Error('[ADSRNode] Expecting "' + key + '" to be a number');
 31 | 	}
 32 | 
 33 | 	var attack = 0, decay = 0, sustain, sustain_adj, release = 0;
 34 | 	var base = 0, acurve = 0, peak = 1, hold = 0, dcurve = 0, rcurve = 0;
 35 | 
 36 | 	function update(opts){
 37 | 		base    = getNum(opts, 'base'        , base   );
 38 | 		attack  = getNum(opts, 'attack'      , attack );
 39 | 		acurve  = getNum(opts, 'attackCurve' , acurve );
 40 | 		peak    = getNum(opts, 'peak'        , peak   );
 41 | 		hold    = getNum(opts, 'hold'        , hold   );
 42 | 		decay   = getNum(opts, 'decay'       , decay  );
 43 | 		dcurve  = getNum(opts, 'decayCurve'  , dcurve );
 44 | 		sustain = getNum(opts, 'sustain'     , sustain);
 45 | 		release = getNum(opts, 'release'     , release);
 46 | 		rcurve  = getNum(opts, 'releaseCurve', rcurve );
 47 | 		sustain_adj = adjustCurve(dcurve, peak, sustain);
 48 | 	}
 49 | 
 50 | 	// extract options
 51 | 	update(opts);
 52 | 
 53 | 	// create the node and inject the new methods
 54 | 	var node = ctx.createConstantSource();
 55 | 	node.offset.value = base;
 56 | 
 57 | 	// unfortunately, I can't seem to figure out how to use cancelAndHoldAtTime, so I have to have
 58 | 	// code that calculates the ADSR curve in order to figure out the value at a given time, if an
 59 | 	// interruption occurs
 60 | 	//
 61 | 	// the curve functions (linearRampToValueAtTime and setTargetAtTime) require an *event*
 62 | 	// preceding the curve in order to calculate the correct start value... inserting the event
 63 | 	// *should* work with cancelAndHoldAtTime, but it doesn't (or I misunderstand the API).
 64 | 	//
 65 | 	// therefore, for the curves to start at the correct location, I need to be able to calculate
 66 | 	// the entire ADSR curve myself, so that I can correctly interrupt the curve at any moment.
 67 | 	//
 68 | 	// these values track the state of the trigger/release moments, in order to calculate the final
 69 | 	// curve
 70 | 	var lastTrigger = false;
 71 | 	var lastRelease = false;
 72 | 
 73 | 	// small epsilon value to check for divide by zero
 74 | 	var eps = 0.00001;
 75 | 
 76 | 	function curveValue(type, startValue, endValue, curTime, maxTime){
 77 | 		if (type === 0)
 78 | 			return startValue + (endValue - startValue) * Math.min(curTime / maxTime, 1);
 79 | 		// otherwise, exponential
 80 | 		return endValue + (startValue - endValue) * Math.exp(-curTime * type / maxTime);
 81 | 	}
 82 | 
 83 | 	function adjustCurve(type, startValue, endValue){
 84 | 		// the exponential curve will never hit its target... but we can calculate an adjusted
 85 | 		// target so that it will miss the adjusted value, but end up hitting the actual target
 86 | 		if (type === 0)
 87 | 			return endValue; // linear hits its target, so no worries
 88 | 		var endExp = Math.exp(-type);
 89 | 		return (endValue - startValue * endExp) / (1 - endExp);
 90 | 	}
 91 | 
 92 | 	function triggeredValue(time){
 93 | 		// calculates the actual value of the envelope at a given time, where `time` is the number
 94 | 		// of seconds after a trigger (but before a release)
 95 | 		var atktime = lastTrigger.atktime;
 96 | 		if (time < atktime){
 97 | 			return curveValue(acurve, lastTrigger.v,
 98 | 				adjustCurve(acurve, lastTrigger.v, peak), time, atktime);
 99 | 		}
100 | 		if (time < atktime + hold)
101 | 			return peak;
102 | 		if (time < atktime + hold + decay)
103 | 			return curveValue(dcurve, peak, sustain_adj, time - atktime - hold, decay);
104 | 		return sustain;
105 | 	}
106 | 
107 | 	function releasedValue(time){
108 | 		// calculates the actual value of the envelope at a given time, where `time` is the number
109 | 		// of seconds after a release
110 | 		if (time < 0)
111 | 			return sustain;
112 | 		if (time > lastRelease.reltime)
113 | 			return base;
114 | 		return curveValue(rcurve, lastRelease.v,
115 | 			adjustCurve(rcurve, lastRelease.v, base), time, lastRelease.reltime);
116 | 	}
117 | 
118 | 	function curveTo(param, type, value, time, duration){
119 | 		if (type === 0 || duration <= 0)
120 | 			param.linearRampToValueAtTime(value, time + duration);
121 | 		else // exponential
122 | 			param.setTargetAtTime(value, time, duration / type);
123 | 	}
124 | 
125 | 	node.trigger = function(when){
126 | 		if (typeof when === 'undefined')
127 | 			when = this.context.currentTime;
128 | 
129 | 		if (lastTrigger !== false){
130 | 			if (when < lastTrigger.when)
131 | 				throw new Error('[ADSRNode] Cannot trigger before future trigger');
132 | 			this.release(when);
133 | 		}
134 | 		var v = base;
135 | 		var interruptedLine = false;
136 | 		if (lastRelease !== false){
137 | 			var now = when - lastRelease.when;
138 | 			v = releasedValue(now);
139 | 			// check if a linear release has been interrupted by this attack
140 | 			interruptedLine = rcurve === 0 && now >= 0 && now <= lastRelease.reltime;
141 | 			lastRelease = false;
142 | 		}
143 | 		var atktime = attack;
144 | 		if (Math.abs(base - peak) > eps)
145 | 			atktime = attack * (v - peak) / (base - peak);
146 | 		lastTrigger = { when: when, v: v, atktime: atktime };
147 | 
148 | 		this.offset.cancelScheduledValues(when);
149 | 
150 | 		if (DEBUG){
151 | 			// simulate curve using triggeredValue (debug purposes)
152 | 			for (var i = 0; i < 10; i += 0.01)
153 | 				this.offset.setValueAtTime(triggeredValue(i), when + i);
154 | 			return this;
155 | 		}
156 | 
157 | 		if (interruptedLine)
158 | 			this.offset.linearRampToValueAtTime(v, when);
159 | 		else
160 | 			this.offset.setTargetAtTime(v, when, 0.001);
161 | 		curveTo(this.offset, acurve, adjustCurve(acurve, v, peak), when, atktime);
162 | 		this.offset.setTargetAtTime(peak, when + atktime, 0.001);
163 | 		if (hold > 0)
164 | 			this.offset.setTargetAtTime(peak, when + atktime + hold, 0.001);
165 | 		curveTo(this.offset, dcurve, sustain_adj, when + atktime + hold, decay);
166 | 		this.offset.setTargetAtTime(sustain, when + atktime + hold + decay, 0.001);
167 | 		return this;
168 | 	};
169 | 
170 | 	node.release = function(when){
171 | 		if (typeof when === 'undefined')
172 | 			when = this.context.currentTime;
173 | 
174 | 		if (lastTrigger === false)
175 | 			throw new Error('[ADSRNode] Cannot release without a trigger');
176 | 		if (when < lastTrigger.when)
177 | 			throw new Error('[ADSRNode] Cannot release before the last trigger');
178 | 		var tnow = when - lastTrigger.when;
179 | 		var v = triggeredValue(tnow);
180 | 		var reltime = release;
181 | 		if (Math.abs(sustain - base) > eps)
182 | 			reltime = release * (v - base) / (sustain - base);
183 | 		lastRelease = { when: when, v: v, reltime: reltime };
184 | 		var atktime = lastTrigger.atktime;
185 | 		// check if a linear attack or a linear decay has been interrupted by this release
186 | 		var interruptedLine =
187 | 			(acurve === 0 && tnow >= 0 && tnow <= atktime) ||
188 | 			(dcurve === 0 && tnow >= atktime + hold && tnow <= atktime + hold + decay);
189 | 		lastTrigger = false;
190 | 
191 | 		this.offset.cancelScheduledValues(when);
192 | 		node.baseTime = when + reltime;
193 | 
194 | 		if (DEBUG){
195 | 			// simulate curve using releasedValue (debug purposes)
196 | 			for (var i = 0; true; i += 0.01){
197 | 				this.offset.setValueAtTime(releasedValue(i), when + i);
198 | 				if (i >= reltime)
199 | 					break;
200 | 			}
201 | 			return this;
202 | 		}
203 | 
204 | 		if (interruptedLine)
205 | 			this.offset.linearRampToValueAtTime(v, when);
206 | 		else
207 | 			this.offset.setTargetAtTime(v, when, 0.001);
208 | 		curveTo(this.offset, rcurve, adjustCurve(rcurve, v, base), when, reltime);
209 | 		this.offset.setTargetAtTime(base, when + reltime, 0.001);
210 | 		return this;
211 | 	};
212 | 
213 | 	node.reset = function(){
214 | 		lastTrigger = false;
215 | 		lastRelease = false;
216 | 		var now = this.context.currentTime;
217 | 		this.offset.cancelScheduledValues(now);
218 | 		this.offset.setTargetAtTime(base, now, 0.001);
219 | 		node.baseTime = now;
220 | 		return this;
221 | 	};
222 | 
223 | 	node.update = function(opts){
224 | 		update(opts);
225 | 		return this.reset();
226 | 	};
227 | 
228 | 	node.baseTime = 0;
229 | 
230 | 	return node;
231 | }
232 | 
233 | // export appropriately
234 | if (typeof window === 'undefined')
235 | 	module.exports = ADSRNode;
236 | else
237 | 	window.ADSRNode = ADSRNode;
238 | 
239 | })();
240 | 


--------------------------------------------------------------------------------
/debugger.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <!--
 4 | (c) Copyright 2018, Sean Connelly (@voidqk), http://sean.cm
 5 | MIT License
 6 | Project Home: https://github.com/voidqk/adsrnode
 7 | -->
 8 | <head>
 9 | 	<title>ADSRNode Debugger</title>
10 | 	<script src="adsrnode.js"></script>
11 | 	<style>
12 | 
13 | body {
14 | 	background-color: #eef;
15 | 	font-family: sans-serif;
16 | }
17 | 
18 | 	</style>
19 | </head>
20 | <body>
21 | 	<p>Move mouse to interact with interruption logic.</p>
22 | 	<p>Click mouse to change mode.</p>
23 | 	<canvas id="cnv" width="1600" height="800" style="width: 800px; height: 400px;"></canvas>
24 | 	<script>
25 | 
26 | var cnv = document.getElementById('cnv');
27 | var ctx = cnv.getContext('2d');
28 | var debugMode = 0;
29 | 
30 | function redraw(offset){
31 | 	var curve = (debugMode == 0 || debugMode == 2) ? 6 : 0;
32 | 	var opts = {
33 | 		base: -0.5,
34 | 		attack: 0.4,
35 | 		attackCurve: curve,
36 | 		peak: 1,
37 | 		hold: 0.3,
38 | 		decay: 0.5,
39 | 		decayCurve: curve,
40 | 		sustain: 0.5,
41 | 		release: 0.3,
42 | 		releaseCurve: curve
43 | 	};
44 | 
45 | 	var rate = 44100;
46 | 	var sustime = 1; // seconds to sustain
47 | 	var downtime = opts.attack + opts.hold + opts.decay + sustime;
48 | 	var duration = downtime + opts.release + 0.5;
49 | 	var actx = new OfflineAudioContext(1, Math.ceil(rate * duration), rate);
50 | 	var env = ADSRNode(actx, opts);
51 | 	env.connect(actx.destination);
52 | 	env.start();
53 | 	env.trigger(0);
54 | 	if (debugMode == 0 || debugMode == 1){
55 | 		if (offset * duration > downtime)
56 | 			env.release(downtime);
57 | 		env.trigger(offset * duration);
58 | 	}
59 | 	else
60 | 		env.release(offset * duration);
61 | 
62 | 	actx.startRendering().then(function(buf){
63 | 		ctx.fillStyle = '#fff';
64 | 		ctx.fillRect(0, 0, cnv.width, cnv.height);
65 | 		ctx.fillStyle = '#000';
66 | 		ctx.font = '20px sans-serif';
67 | 		ctx.fillText((['Two Curves', 'Two Linear', 'Single Curves', 'Single Linear'])[debugMode],
68 | 			10, 30);
69 | 		ctx.beginPath();
70 | 		var data = buf.getChannelData(0);
71 | 		for (var sx = 0; sx < cnv.width; sx++){
72 | 			var x = sx / (cnv.width - 1);
73 | 			var y = data[(x * rate * duration) | 0];
74 | 			var sy = cnv.height * 0.5 - y * cnv.height * 0.4;
75 | 			if (sx == 0)
76 | 				ctx.moveTo(sx, sy);
77 | 			else
78 | 				ctx.lineTo(sx, sy);
79 | 		}
80 | 		ctx.strokeStyle = '#000';
81 | 		ctx.stroke();
82 | 	});
83 | }
84 | 
85 | cnv.addEventListener('mousemove', function(e){
86 | 	redraw(e.offsetX * 2 / cnv.width);
87 | });
88 | 
89 | cnv.addEventListener('click', function(e){
90 | 	debugMode = (debugMode + 1) % 4;
91 | 	redraw(e.offsetX * 2 / cnv.width);
92 | });
93 | 
94 | redraw(1);
95 | 	</script>
96 | </body>
97 | </html>
98 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <!--
  4 | (c) Copyright 2018, Sean Connelly (@voidqk), http://sean.cm
  5 | MIT License
  6 | Project Home: https://github.com/voidqk/adsrnode
  7 | -->
  8 | <head>
  9 | 	<title>ADSRNode Demo</title>
 10 | 	<script src="adsrnode.js"></script>
 11 | 	<style>
 12 | html, body {
 13 | 	font-family: sans-serif;
 14 | 	background-color: #eef;
 15 | }
 16 | table, tr {
 17 | 	background-color: #fff;
 18 | 	border-collapse: collapse;
 19 | 	padding: 0;
 20 | }
 21 | td {
 22 | 	padding: 5px;
 23 | 	border: 1px solid #777;
 24 | 	text-align: center;
 25 | }
 26 | td:first-child {
 27 | 	text-align: right;
 28 | 	font-weight: bold;
 29 | }
 30 | pre {
 31 | 	text-align: left;
 32 | 	margin: 0 10px;
 33 | }
 34 | input[type=range] {
 35 | 	width: 350px;
 36 | }
 37 | 	</style>
 38 | </head>
 39 | <body>
 40 | 	<canvas id="cnv" width="1600" height="800" style="width: 800px; height: 400px;"></canvas>
 41 | 	<table>
 42 | 		<tbody>
 43 | 			<tr>
 44 | 				<td>Base:</td>
 45 | 				<td>-5 <input type="range" min="0" max="100" value="50" id="base" /> 5</td>
 46 | 				<td rowspan="11"><pre id="raw"></pre></td>
 47 | 			</tr>
 48 | 			<tr>
 49 | 				<td>Attack:</td>
 50 | 				<td>0 <input type="range" min="0" max="50" value="10" id="attack" /> 5</td>
 51 | 			</tr>
 52 | 			<tr>
 53 | 				<td>Attack Curve:</td>
 54 | 				<td>0 <input type="range" min="0" max="100" value="60" id="acurve" /> 10</td>
 55 | 			</tr>
 56 | 			<tr>
 57 | 				<td>Peak:</td>
 58 | 				<td>-5 <input type="range" min="0" max="100" value="70" id="peak" /> 5</td>
 59 | 			</tr>
 60 | 			<tr>
 61 | 				<td>Hold:</td>
 62 | 				<td>0 <input type="range" min="0" max="50" value="10" id="hold" /> 5</td>
 63 | 			</tr>
 64 | 			<tr>
 65 | 				<td>Decay:</td>
 66 | 				<td>0 <input type="range" min="0" max="50" value="10" id="decay" /> 5</td>
 67 | 			</tr>
 68 | 			<tr>
 69 | 				<td>Decay Curve:</td>
 70 | 				<td>0 <input type="range" min="0" max="100" value="0" id="dcurve" /> 10</td>
 71 | 			</tr>
 72 | 			<tr>
 73 | 				<td>Sustain:</td>
 74 | 				<td>-5 <input type="range" min="0" max="100" value="60" id="sustain" /> 5</td>
 75 | 			</tr>
 76 | 			<tr>
 77 | 				<td>Release:</td>
 78 | 				<td>0 <input type="range" min="0" max="50" value="10" id="release" /> 5</td>
 79 | 			</tr>
 80 | 			<tr>
 81 | 				<td>Release Curve:</td>
 82 | 				<td>0 <input type="range" min="0" max="100" value="20" id="rcurve" /> 10</td>
 83 | 			</tr>
 84 | 		</tbody>
 85 | 	</table>
 86 | 	<script>
 87 | 
 88 | var cnv = document.getElementById('cnv');
 89 | var ctx = cnv.getContext('2d');
 90 | var lastopts = false;
 91 | 
 92 | function redraw(){
 93 | 	function readValue(id){
 94 | 		return parseFloat(document.getElementById(id).value) / 10 - 5;
 95 | 	}
 96 | 	function readTime(id){
 97 | 		return parseFloat(document.getElementById(id).value) / 10;
 98 | 	}
 99 | 	function readCurve(id){
100 | 		return parseFloat(document.getElementById(id).value) / 10;
101 | 	}
102 | 	var opts = {
103 | 		base:         readValue ('base'   ),
104 | 		attack:       readTime  ('attack' ),
105 | 		attackCurve:  readCurve ('acurve' ),
106 | 		peak:         readValue ('peak'   ),
107 | 		hold:         readTime  ('hold'   ),
108 | 		decay:        readTime  ('decay'  ),
109 | 		decayCurve:   readCurve ('dcurve' ),
110 | 		sustain:      readValue ('sustain'),
111 | 		release:      readTime  ('release'),
112 | 		releaseCurve: readCurve ('rcurve' )
113 | 	};
114 | 
115 | 	// check if any changes have been made
116 | 	if (lastopts !== false &&
117 | 		lastopts.base         === opts.base         &&
118 | 		lastopts.attack       === opts.attack       &&
119 | 		lastopts.attackCurve  === opts.attackCurve  &&
120 | 		lastopts.peak         === opts.peak         &&
121 | 		lastopts.hold         === opts.hold         &&
122 | 		lastopts.decay        === opts.decay        &&
123 | 		lastopts.decayCurve   === opts.decayCurve   &&
124 | 		lastopts.sustain      === opts.sustain      &&
125 | 		lastopts.release      === opts.release      &&
126 | 		lastopts.releaseCurve === opts.releaseCurve)
127 | 		return;
128 | 	lastopts = opts;
129 | 
130 | 	var out = '';
131 | 	for (var k in opts)
132 | 		out += '\n  ' + k + ': ' + opts[k].toFixed(1) + ',';
133 | 	document.getElementById('raw').innerHTML = '{' + out.substr(0, out.length - 1) + '\n}';
134 | 
135 | 	var rate = 44100;
136 | 	var sustime = 1; // seconds to sustain
137 | 	var downtime = opts.attack + opts.hold + opts.decay + sustime;
138 | 	var duration = downtime + opts.release;
139 | 	var actx = new OfflineAudioContext(1, Math.ceil(rate * duration), rate);
140 | 	var env = ADSRNode(actx, opts);
141 | 	env.connect(actx.destination);
142 | 	env.start();
143 | 	env.trigger(0);
144 | 	env.release(downtime);
145 | 
146 | 	actx.startRendering().then(function(buf){
147 | 		ctx.fillStyle = '#fff';
148 | 		ctx.fillRect(0, 0, cnv.width, cnv.height);
149 | 		var data = buf.getChannelData(0);
150 | 		var dmin = data[0];
151 | 		var dmax = data[0];
152 | 		for (var i = 1; i < data.length; i++){
153 | 			if (data[i] < dmin)
154 | 				dmin = data[i];
155 | 			if (data[i] > dmax)
156 | 				dmax = data[i];
157 | 		}
158 | 
159 | 		var border = 100;
160 | 		var ox = border;
161 | 		var oy = border;
162 | 		var ow = cnv.width - 2 * border;
163 | 		var oh = cnv.height - 2 * border;
164 | 
165 | 		function todat(sx, sy){
166 | 			return [
167 | 				(sx - ox) * duration / ow,
168 | 				((oy - sy) / oh + 1) * (dmax - dmin) + dmin
169 | 			];
170 | 		}
171 | 
172 | 		function toscr(x, y){
173 | 			return [
174 | 				ox + Math.round((x * ow) / duration),
175 | 				oy + Math.round(oh * (1 - (y - dmin) / (dmax - dmin)))
176 | 			];
177 | 		}
178 | 
179 | 		// fix aspect ratio
180 | 		var p1 = toscr(0, 0);
181 | 		var p2 = toscr(1, 1);
182 | 		var datratio = Math.abs((p2[0] - p1[0]) / (p2[1] - p1[1]));
183 | 		if (datratio < 1){
184 | 			// decrease oh
185 | 			oh *= datratio;
186 | 			oy = (cnv.height - oh) * 0.5;
187 | 		}
188 | 		else{
189 | 			// decrease ow
190 | 			ow /= datratio;
191 | 		}
192 | 
193 | 		function hline(y){
194 | 			y = toscr(0, y)[1];
195 | 			ctx.moveTo(0, y);
196 | 			ctx.lineTo(cnv.width, y);
197 | 		}
198 | 
199 | 		function vline(x){
200 | 			x = toscr(x, 0)[0];
201 | 			ctx.moveTo(x, 0);
202 | 			ctx.lineTo(x, cnv.height);
203 | 		}
204 | 
205 | 		var susx1 = toscr(opts.attack + opts.hold + opts.decay, 0)[0];
206 | 		var susx2 = toscr(opts.attack + opts.hold + opts.decay + sustime, 0)[0];
207 | 		ctx.fillStyle = '#dfd';
208 | 		ctx.fillRect(susx1, 0, susx2 - susx1, cnv.height);
209 | 
210 | 		ctx.beginPath();
211 | 		for (var gy = -10; gy <= 10; gy += 1)
212 | 			hline(gy);
213 | 		for (var gx = -2; gx <= 22; gx += 1)
214 | 			vline(gx);
215 | 		ctx.lineWidth = 3;
216 | 		ctx.strokeStyle = 'rgba(0, 0, 0, 0.25)';
217 | 		ctx.stroke();
218 | 
219 | 		ctx.beginPath();
220 | 		hline(0);
221 | 		vline(0);
222 | 		ctx.lineWidth = 3;
223 | 		ctx.strokeStyle = '#000';
224 | 		ctx.stroke();
225 | 
226 | 		ctx.beginPath();
227 | 		var basey = toscr(0, opts.base)[1]
228 | 		ctx.moveTo(0, basey);
229 | 		ctx.lineTo(ox, basey);
230 | 		for (var sx = 0; sx < ow; sx++){
231 | 			var x = todat(sx + ox, 0)[0];
232 | 			var i = (x * rate) | 0;
233 | 			if (i > data.length - 1)
234 | 				i = data.length - 1;
235 | 			var y = data[i];
236 | 			var p = toscr(x, y);
237 | 			ctx.lineTo(p[0], p[1]);
238 | 		}
239 | 		ctx.lineTo(ox + ow, basey);
240 | 		ctx.lineTo(cnv.width, basey);
241 | 		ctx.lineWidth = 7;
242 | 		ctx.strokeStyle = '#000';
243 | 		ctx.stroke();
244 | 
245 | 		function circle(x, y){
246 | 			var p = toscr(x, y);
247 | 			ctx.beginPath();
248 | 			ctx.arc(p[0], p[1], 10, 0, Math.PI * 2);
249 | 			ctx.fillStyle = '#f77';
250 | 			ctx.strokeStyle = '#000';
251 | 			ctx.lineWidth = 4;
252 | 			ctx.fill();
253 | 			ctx.stroke();
254 | 		}
255 | 		circle(0, opts.base);
256 | 		circle(opts.attack, opts.peak);
257 | 		circle(opts.attack + opts.hold, opts.peak);
258 | 		circle(opts.attack + opts.hold + opts.decay, opts.sustain);
259 | 		circle(opts.attack + opts.hold + opts.decay + sustime, opts.sustain);
260 | 		circle(duration, opts.base);
261 | 	});
262 | }
263 | setInterval(redraw, 100);
264 | 	</script>
265 | </body>
266 | </html>
267 | 


--------------------------------------------------------------------------------