Tone.js/examples/interaction.html
2015-02-25 00:49:03 -05:00

145 lines
No EOL
3.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>INTERACTIVE</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="../build/Tone.Preset.js"></script>
<script type="text/javascript" src="./deps/jquery.min.js"></script>
<script type="text/javascript" src="./deps/qwerty-hancock.js"></script>
<script type="text/javascript" src="./deps/nexusUI.js"></script>
<script type="text/javascript" src="./deps/prism.js"></script>
<script type="text/javascript" src="./scripts/Interface.js"></script>
<link rel="stylesheet" type="text/css" href="./style/examples.css">
<link rel="stylesheet" type="text/css" href="./style/prism.css">
<script type="text/javascript">
// jshint ignore: start
</script>
</head>
<body>
<style type="text/css">
[nx="joints"] {
width: 100%;
height: 300px;
}
</style>
<div id="Explanation">
Making it interactive
<br>
<br>
The big dots proximity to each of the smaller dots controls the amount of an effect.
</div>
<div id="Content">
<div id="LoadingBar"></div>
<div id="Rack">
<canvas nx="joints"></canvas>
</div>
<div id="Code"></div>
</div>
<div id="Container">
</div>
<script id="ToneCode" type="text/javascript">
//the sound source
var player = new Tone.Player("./audio/FWDL.mp3");
player.loop = true;
//distortion effect
var crusher = new Tone.Distortion(0.7);
//a lowpass filter
var lowpass = new Tone.Filter({
"type" : "lowpass",
"frequency" : 400,
"Q" : 3
});
//high pass filter
var highpass = new Tone.Filter({
"type" : "highpass",
"frequency" : 1200,
"Q" : 5
});
//a chorus effect
var chorus = new Tone.Chorus(3, 2);
//reverb
var freeverb = new Tone.Freeverb(0.8, 0.05);
//delay
var feedbackDelay = new Tone.PingPongDelay("4n");
//widener
var widener = new Tone.StereoWidener(1);
//make a gain matrix
var volumes = {
"node0" : Tone.context.createGain().toMaster(),
"node1" : Tone.context.createGain().toMaster(),
"node2" : Tone.context.createGain().toMaster(),
"node3" : Tone.context.createGain().toMaster(),
"node4" : Tone.context.createGain().toMaster(),
"node5" : Tone.context.createGain().toMaster(),
"node6" : Tone.context.createGain().toMaster(),
"node7" : Tone.context.createGain().toMaster(),
}
player.connect(volumes.node0);
player.chain(crusher, volumes.node1);
player.chain(lowpass, volumes.node2);
player.chain(highpass, volumes.node3);
player.chain(chorus, volumes.node4);
player.chain(freeverb, volumes.node5);
player.chain(feedbackDelay, volumes.node6);
player.chain(widener, volumes.node7);
</script>
<script type="text/javascript">
Interface.Loading("LoadingBar");
Interface.Rack("Rack", "Playing with effects");
Interface.Toggle("Rack", function(on){
if (on){
player.start();
} else {
player.stop();
}
});
Interface.Code("Code", "ToneCode");
nx.onload = function(){
var width = joints1.width;
var height = joints1.height;
joints1.nodeSize = 30
joints1.val.x = Math.random();
joints1.val.y = Math.random();
joints1.draw();
function setValues(data){
for (var n in volumes){
if (data.hasOwnProperty(n)){
volumes[n].gain.value = Math.pow(data[n], 2);
} else {
volumes[n].gain.value = 0;
}
}
}
setValues(joints1.val);
joints1.on("*", setValues);
}
</script>
</body>
</html>