mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 16:48:00 +00:00
123 lines
No EOL
3.1 KiB
HTML
123 lines
No EOL
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>BUSES</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
|
|
<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="../build/Tone.js"></script>
|
|
<script type="text/javascript" src="../build/Tone.Preset.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">
|
|
Buses
|
|
<br>
|
|
<br>
|
|
Buses allow you to send signal using named sends and receives. Sometimes
|
|
this is advantageous over directly connecting nodes for modularity and loose coupling.
|
|
</div>
|
|
<div id="Content">
|
|
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
|
|
/* globals Tone, GUI */
|
|
|
|
var synth = new Tone.MonoSynth();
|
|
synth.setPreset("Barky");
|
|
var dry = Tone.context.createGain();
|
|
synth.connect(dry);
|
|
synth.setVolume(-6);
|
|
dry.toMaster();
|
|
|
|
//need to force 1 channel synth signal into a 2 channels for stereo chorus effect
|
|
var mono = new Tone.Mono();
|
|
synth.connect(mono);
|
|
|
|
var chorusSend = mono.send("chorus");
|
|
chorusSend.gain.value = 0;
|
|
var chebySend = synth.send("cheby");
|
|
chebySend.gain.value = 0;
|
|
var autowahSend = synth.send("autowah");
|
|
autowahSend.gain.value = 0;
|
|
|
|
//make some effects
|
|
var chorus = new Tone.Chorus();
|
|
chorus.receive("chorus");
|
|
chorus.toMaster();
|
|
chorus.setPreset("ether");
|
|
var cheby = new Tone.Chebyshev(50);
|
|
cheby.receive("cheby");
|
|
cheby.toMaster();
|
|
cheby.setPreset("bubbles");
|
|
var autoWah = new Tone.AutoWah();
|
|
autoWah.receive("autowah");
|
|
autoWah.toMaster();
|
|
autoWah.setPreset("talker");
|
|
|
|
// GUI //
|
|
|
|
new GUI.TopBar(Tone);
|
|
|
|
var content = $("#Content");
|
|
|
|
//sliders
|
|
var drySlider = new GUI.Slider(content, function(val){
|
|
dry.gain.value = val;
|
|
}, 1, "dry");
|
|
drySlider.render(1);
|
|
new GUI.Slider(content, function(val){
|
|
chorusSend.gain.value = val;
|
|
}, 0, "chorus");
|
|
new GUI.Slider(content, function(val){
|
|
autowahSend.gain.value = val;
|
|
}, 0, "autowah");
|
|
new GUI.Slider(content, function(val){
|
|
chebySend.gain.value = val;
|
|
}, 0, "chebyshev");
|
|
|
|
//keyboard
|
|
$("<div>", {"id" : "Keyboard"}).appendTo(content);
|
|
var keyboard = new QwertyHancock({
|
|
id: "Keyboard",
|
|
width: 200,
|
|
height: 75,
|
|
octaves: 1,
|
|
startNote: "C4",
|
|
whiteNotesColour: "white",
|
|
blackNotesColour: "black",
|
|
hoverColour: "#f3e939"
|
|
});
|
|
keyboard.keyDown = function(note, freq){
|
|
synth.triggerAttack(freq);
|
|
};
|
|
keyboard.keyUp = function(){
|
|
synth.triggerRelease();
|
|
};
|
|
|
|
</script>
|
|
<style type="text/css">
|
|
#Content {
|
|
width: 200px;
|
|
}
|
|
.Slider {
|
|
margin-bottom: 10px;
|
|
}
|
|
#Keyboard {
|
|
background-color: black;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html> |