mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 00:27:58 +00:00
141 lines
No EOL
3 KiB
HTML
141 lines
No EOL
3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Envelope</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
|
|
<script type="text/javascript" src="../build/Tone.js"></script>
|
|
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
|
|
<script type="text/javascript" src="../../Notone.js/build/Notone.GUI.js"></script>
|
|
<script type="text/javascript" src="./scripts/Interface.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="./style/examples.css">
|
|
|
|
<script type="text/javascript">
|
|
// jshint ignore: start
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<style type="text/css">
|
|
img {
|
|
width: 300px!important;
|
|
}
|
|
|
|
.y {
|
|
float: left;
|
|
height: 290px!important;
|
|
}
|
|
|
|
#Sliders {
|
|
float: left;
|
|
position: relative;
|
|
width: calc(100% - 100px);
|
|
}
|
|
|
|
.Button {
|
|
clear: both;
|
|
}
|
|
</style>
|
|
<div id="Content">
|
|
<div id="Title">Envelope</div>
|
|
<div id="Explanation">
|
|
Envelopes ramp amplitude, frequency or any other parameter over time.
|
|
<a href="http://tonejs.org/docs/#Envelope">Tone.Envelope</a> and the classes that extend it
|
|
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">
|
|
</div>
|
|
<div id="Sliders"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var env = new Tone.AmplitudeEnvelope({
|
|
"attack" : 0.11,
|
|
"decay" : 0.21,
|
|
"sustain" : 0.09,
|
|
"release" : 1.2
|
|
}).toMaster();
|
|
|
|
//create an oscillator and connect it to the envelope
|
|
var osc = new Tone.Oscillator({
|
|
"type" : "triangle",
|
|
"frequency" : "C#4",
|
|
"volume" : -8,
|
|
}).connect(env).start();
|
|
|
|
</script>
|
|
|
|
<script id="GUI" type="text/javascript">
|
|
$(function(){
|
|
Notone.config({
|
|
"search" : false,
|
|
"expandInDrawer" : true,
|
|
"hideDrawer" : Interface.isMobile,
|
|
"drawer" : true,
|
|
"container" : "body"
|
|
});
|
|
|
|
var oscGUI = Notone.add(osc, "Oscillator");
|
|
|
|
var envGUI = Notone.add(env, "Envelope");
|
|
|
|
new Interface.Slider({
|
|
param : "attack",
|
|
name : "attack",
|
|
parent : $("#Sliders"),
|
|
gui : envGUI,
|
|
min : 0.005,
|
|
max : 1,
|
|
exp : 2,
|
|
});
|
|
|
|
new Interface.Slider({
|
|
param : "decay",
|
|
name : "decay",
|
|
parent : $("#Sliders"),
|
|
gui : envGUI,
|
|
min : 0.005,
|
|
max : 1,
|
|
exp : 2,
|
|
});
|
|
|
|
new Interface.Slider({
|
|
param : "release",
|
|
name : "release",
|
|
parent : $("#Sliders"),
|
|
gui : envGUI,
|
|
min : 0.2,
|
|
max : 2,
|
|
exp : 2,
|
|
});
|
|
|
|
new Interface.Slider({
|
|
param : "sustain",
|
|
name : "sustain",
|
|
gui : envGUI,
|
|
axis : "y",
|
|
min : 0.0,
|
|
max : 1,
|
|
exp : 2,
|
|
});
|
|
|
|
new Interface.Button({
|
|
text : "Trigger Attack",
|
|
activeText : "Trigger Release",
|
|
key : 32, //spacebar
|
|
start : function(){
|
|
env.triggerAttack();
|
|
},
|
|
end : function(){
|
|
env.triggerRelease();
|
|
},
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</style>
|
|
</body>
|
|
</html> |