mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 08:38:00 +00:00
154 lines
No EOL
3.5 KiB
HTML
154 lines
No EOL
3.5 KiB
HTML
<html>
|
|
<head>
|
|
<title>MONOSYNTH</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=0.5">
|
|
|
|
<script type="text/javascript" src="../deps/jquery.min.js"></script>
|
|
<script type="text/javascript" src="../deps/jquery-ui.js"></script>
|
|
<script type="text/javascript" src="../deps/jquery.ui.touch-punch.js"></script>
|
|
<script type="text/javascript" src="../Tone.js"></script>
|
|
<script type="text/javascript" src="./Widgets.js"></script>
|
|
<script type="text/javascript" src="./ExampleList.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="./style/widgets.css">
|
|
<link rel="stylesheet" type="text/css" href="./style/jquery-ui.css">
|
|
<script type="text/javascript" src="../deps/qwerty-hancock.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div id="Container">
|
|
<div id="Explanation">
|
|
Monophonic Synthesizer
|
|
<br>
|
|
<br>
|
|
MonoSynth is one a few built in synthesizers. It is simply composed of two oscillators
|
|
(with control over type and unison detune), a filter, and envelopes on amplitude and the filter.
|
|
</div>
|
|
<div id="Content">
|
|
<div id="tabs">
|
|
<ul>
|
|
<li><a href="#envelope">Amplitude</a></li>
|
|
<li><a href="#filter">Filter</a></li>
|
|
<li><a href="#oscillator">Oscillators</a></li>
|
|
</ul>
|
|
<div id="envelope">
|
|
|
|
</div>
|
|
<div id="filter">
|
|
|
|
</div>
|
|
<div id="oscillator">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var synth = new Tone.MonoSynth();
|
|
|
|
synth.toMaster();
|
|
|
|
// GUI //
|
|
|
|
$("#tabs").tabs();
|
|
|
|
var content = $("#Content");
|
|
var envelope = $("#envelope");
|
|
var filter = $("#filter");
|
|
var oscillator = $("#oscillator");
|
|
|
|
//envelopes
|
|
var ampEnv = new GUI.Envelope(envelope, synth.envelope, "amplitude", true);
|
|
var filtEnv =new GUI.Envelope(filter, synth.filterEnvelope, "filter", true);
|
|
|
|
var min = 20;
|
|
var max = 20000;
|
|
var minFilFreq = new GUI.Slider(filter, function(val){
|
|
var freq = Math.pow(val, 2);
|
|
var scaled = freq * (max - min) + min;
|
|
synth.filterEnvelope.min = scaled;
|
|
return scaled;
|
|
}, min, "min freq", "hz");
|
|
var maxFilFreq = new GUI.Slider(filter, function(val){
|
|
var freq = Math.pow(val, 2);
|
|
var scaled = freq * (max - min) + min;
|
|
synth.filterEnvelope.max = scaled;
|
|
return scaled;
|
|
}, min, "max freq", "hz");
|
|
|
|
//oscillator
|
|
var osc = new GUI.Oscillator(oscillator, synth.oscillator, "osc");
|
|
|
|
//keyboard
|
|
$("<div>", {"id" : "Keyboard"}).appendTo(content);
|
|
var keyboard = new QwertyHancock({
|
|
id: "Keyboard",
|
|
width: 350,
|
|
height: 75,
|
|
octaves: 2,
|
|
startNote: "A2",
|
|
whiteNotesColour: "white",
|
|
blackNotesColour: "black",
|
|
hoverColour: "#f3e939"
|
|
});
|
|
keyboard.keyDown = function(note, freq){
|
|
synth.triggerAttack(freq);
|
|
};
|
|
keyboard.keyUp = function(note, freq){
|
|
synth.triggerRelease();
|
|
};
|
|
|
|
// SETUP //
|
|
|
|
function setPreset(name){
|
|
synth.setPreset(name);
|
|
ampEnv.render();
|
|
filtEnv.render();
|
|
osc.render();
|
|
var minVal = Math.pow(Math.max((synth.filterEnvelope.min - min) / (max - min), 0), 0.5);
|
|
minFilFreq.render(minVal);
|
|
var maxVal = Math.pow(Math.max((synth.filterEnvelope.max - min) / (max - min), 0), 0.5);
|
|
maxFilFreq.render(maxVal);
|
|
}
|
|
|
|
setPreset("BrassCircuit");
|
|
|
|
</script>
|
|
|
|
<style type="text/css">
|
|
#Content {
|
|
width: 350px;
|
|
height: 400px;
|
|
}
|
|
|
|
#tabs {
|
|
height: 300px;
|
|
}
|
|
|
|
.Slider {
|
|
width: 80%;
|
|
margin-left: 10%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.Oscillator {
|
|
width: 80%;
|
|
margin-left: 10%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.Envelope {
|
|
margin: auto;
|
|
}
|
|
|
|
.Keyboard {
|
|
background-color: black;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html> |