mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 16:48:00 +00:00
145 lines
No EOL
3.5 KiB
HTML
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> |