2
0
Fork 0
mirror of https://github.com/Tonejs/Tone.js synced 2025-02-15 20:18:24 +00:00
Tone.js/examples/envelope.html

75 lines
2 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
2014-03-14 23:17:18 -04:00
<html>
<head>
<meta charset="utf-8">
2014-03-15 01:02:33 -04:00
<title>Envelope</title>
2014-03-14 23:17:18 -04:00
2019-01-08 20:21:29 -05:00
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">
2014-08-25 23:47:07 -04:00
2019-01-08 20:21:29 -05:00
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-bundle.js"></script>
<script src="../build/Tone.js"></script>
<script src="./js/tonejs-ui.js"></script>
2015-02-11 22:39:28 -05:00
</head>
<body>
<style type="text/css">
2015-06-26 01:23:05 -04:00
img {
2019-01-08 20:21:29 -05:00
display: block;
margin: 5px auto;
2015-06-27 18:02:55 -04:00
width: 300px!important;
2015-02-11 22:39:28 -05:00
}
2015-06-26 01:23:05 -04:00
2019-01-08 20:21:29 -05:00
tone-trigger {
margin-bottom: 10px;
2015-02-11 22:39:28 -05:00
}
</style>
2019-01-08 20:21:29 -05:00
<tone-example>
<tone-explanation label="Envelope">
2015-06-27 17:25:01 -04:00
Envelopes ramp amplitude, frequency or any other parameter over time.
2019-01-08 20:21:29 -05:00
<a href="https://tonejs.github.io/docs/Envelope">Tone.Envelope</a> and the classes that extend it
2015-06-26 01:23:05 -04:00
implement an <a href="https://en.wikipedia.org/wiki/Synthesizer#ADSR_envelope" target="_blank">ADSR</a> envelope type
which splits its ramp into four distinct phases: Attack, Decay, Sustain, Release.
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/ADSR_parameter.svg">
2019-01-08 20:21:29 -05:00
</tone-explanation>
<tone-content>
<tone-trigger></tone-trigger>
<tone-envelope><tone-envelope>
</tone-content>
2014-08-25 23:47:07 -04:00
2019-01-08 20:21:29 -05:00
<tone-drawer collapsed>
<tone-oscillator collapsed frequency><tone-oscillator>
</tone-drawer>
</tone-example>
<script type="text/javascript">
2015-02-11 22:39:28 -05:00
var env = new Tone.AmplitudeEnvelope({
2015-06-26 01:23:05 -04:00
"attack" : 0.11,
"decay" : 0.21,
2019-01-08 20:21:29 -05:00
"sustain" : 0.5,
2015-02-11 22:39:28 -05:00
"release" : 1.2
}).toMaster();
2014-08-25 23:47:07 -04:00
2015-06-26 01:23:05 -04:00
//create an oscillator and connect it to the envelope
var osc = new Tone.Oscillator({
"partials" : [3, 2, 1],
"type" : "custom",
2015-06-26 01:23:05 -04:00
"frequency" : "C#4",
"volume" : -8,
}).connect(env).start();
2014-08-28 00:39:17 -04:00
2019-01-08 20:21:29 -05:00
//bind the interface
document.querySelector("tone-envelope").bind(env);
document.querySelector("tone-oscillator").bind(osc);
2015-06-26 01:23:05 -04:00
2019-01-08 20:21:29 -05:00
document.querySelector("tone-trigger").addEventListener("change", e => {
if (e.detail){
2017-03-26 16:39:19 -04:00
env.triggerAttack();
2019-01-08 20:21:29 -05:00
} else {
2017-03-26 16:39:19 -04:00
env.triggerRelease();
2019-01-08 20:21:29 -05:00
}
2014-08-28 00:39:17 -04:00
});
2014-03-14 23:17:18 -04:00
</script>
</body>
</html>