Tone.js/examples/shiny.html

276 lines
6.3 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
2014-09-12 00:36:56 +00:00
<html>
<head>
<meta charset="utf-8">
2014-09-12 00:36:56 +00:00
<title>SHINY</title>
2015-06-27 22:10:18 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2015-12-08 05:06:58 +00:00
<link rel="icon" type="image/png" sizes="174x174" href="./style/favicon.png">
2014-09-12 00:36:56 +00:00
<script type="text/javascript" src="../build/Tone.js"></script>
2015-06-26 05:23:05 +00:00
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
<script type="text/javascript" src="./scripts/draggabilly.js"></script>
2015-02-25 05:49:03 +00:00
<script type="text/javascript" src="./scripts/Interface.js"></script>
<script type="text/javascript" src="./scripts/Logo.js"></script>
<script type="text/javascript" src="./scripts/nexusUI.js"></script>
2015-02-25 05:49:03 +00:00
<link rel="stylesheet" type="text/css" href="./style/examples.css">
<script type="text/javascript">
// jshint ignore: start
</script>
2014-09-12 00:36:56 +00:00
</head>
<body>
2015-02-25 05:49:03 +00:00
<div id="Content">
2015-06-27 21:25:01 +00:00
<div id="Title">Play Along</div>
<div id="Explanation">
Touch/Mouse and drag to play along with the probabilistic backtrack. X = pitch, Y = modulation.
</div>
2014-09-12 00:36:56 +00:00
</div>
2015-06-27 21:25:01 +00:00
<script type="text/javascript">
2014-09-12 00:36:56 +00:00
2015-06-27 21:25:01 +00:00
//DRUMS//
//and a compressor
var drumCompress = new Tone.Compressor({
"threshold" : -30,
"ratio" : 6,
"attack" : 0.3,
"release" : 0.1
}).toMaster();
var distortion = new Tone.Distortion({
"distortion" : 0.4,
"wet" : 0.4
});
//hats
var hats = new Tone.Sampler("./audio/505/hh.mp3", {
"volume" : -10,
"envelope" : {
"attack" : 0.001,
"decay" : 0.02,
"sustain" : 0.01,
"release" : 0.01
},
"filterEnvelope" : {
"attack" : 0.001,
"decay" : 0.02,
"sustain" : 1,
2015-12-07 16:46:47 +00:00
"baseFrequency" : 6000,
"octaves" : -3.3
2015-06-27 21:25:01 +00:00
},
"filter" : {
"type" : "highpass"
2014-09-12 00:36:56 +00:00
}
2015-06-27 21:25:01 +00:00
}).chain(distortion, drumCompress);
2014-09-12 00:36:56 +00:00
var hatsLoop = new Tone.Loop({
"callback" : function(time){
hats.triggerAttackRelease(0, "8n", time);
},
"interval" : "16n",
"probability" : 0.8
}).start("1m");
//SNARE PART
2015-06-27 21:25:01 +00:00
var snare = new Tone.Sampler("./audio/505/snare.mp3", {
"envelope" : {
"attack" : 0.01,
"decay" : 0.05,
"sustain" : 0
},
"filterEnvelope" : {
"attack" : 0.001,
"decay" : 0.01,
"sustain" : 0,
2015-12-07 16:46:47 +00:00
"baseFrequency" : 3000,
"octaves" : 2
2015-06-27 21:25:01 +00:00
},
}).chain(distortion, drumCompress);
var snarePart = new Tone.Sequence(function(time, velocity){
snare.triggerAttackRelease(0, "8n", time, velocity);
}, [null, 1, null, [1, 0.3]]).start(0);
var kick = new Tone.MembraneSynth({
"pitchDecay" : 0.01,
"octaves" : 6,
2015-06-27 21:25:01 +00:00
"oscillator" : {
"type" : "square4"
2015-06-27 21:25:01 +00:00
},
"envelope" : {
"attack" : 0.001,
2015-06-27 21:25:01 +00:00
"decay" : 0.2,
"sustain" : 0
2015-06-27 21:25:01 +00:00
}
}).connect(drumCompress);
var kickPart = new Tone.Sequence(function(time, probability){
if (Math.random() < probability){
kick.triggerAttack("C1", time);
}
}, [1, [1, [null, 0.3]], 1, [1, [null, 0.5]], 1, 1, 1, [1, [null, 0.8]]], "2n").start(0);
2015-06-27 21:25:01 +00:00
// BASS
var bass = new Tone.SimpleFM({
"harmonicity" : 1,
"modulationIndex" : 3.5,
2015-06-27 21:25:01 +00:00
"carrier" : {
"oscillator" : {
"type" : "custom",
"partials" : [0, 1, 0, 2]
2015-06-27 21:25:01 +00:00
},
2014-09-12 00:36:56 +00:00
"envelope" : {
2015-06-27 21:25:01 +00:00
"attack" : 0.08,
"decay" : 0.3,
"sustain" : 0,
},
},
"modulator" : {
"oscillator" : {
"type" : "square"
2015-06-27 21:25:01 +00:00
},
"envelope" : {
"attack" : 0.1,
"decay" : 0.2,
"sustain" : 0.3,
2014-09-12 00:36:56 +00:00
"release" : 0.01
},
2015-06-27 21:25:01 +00:00
}
}).toMaster();
var bassPart = new Tone.Part(function(time, event){
if (Math.random() < event.prob){
bass.triggerAttackRelease(event.note, event.dur, time);
}
}, [{time : "0:0", note : "C2", dur : "4n + 8n", prob: 1}, {time : "0:2", note : "C2", dur : "8n", prob : 0.6},
{time : "0:2 + 4t", note : "C2", dur : "8n", prob : 0.4}, {time : "0:2 + 4t*2", note : "C2", dur : "8n", prob : 0.9},
{time : "1:0", note : "C2", dur : "4n + 8n", prob : 1}, {time : "1:2", note : "C2", dur : "8n", prob : 0.6},
{time : "1:2 + 4t", note : "C2", dur : "8n", prob : 0.4}, {time : "1:2 + 4t*2", note : "E2", dur : "8n", prob : 0.9},
{time : "2:0", note : "F2", dur : "4n + 8n", prob : 1}, {time : "2:2", note : "F2", dur : "8n", prob : 0.6},
{time : "2:2 + 4t", note : "F2", dur : "8n", prob : 0.4}, {time : "2:2 + 4t*2", note : "F2", dur : "8n", prob : 0.9},
{time : "3:0", note : "F2", dur : "4n + 8n", prob : 1}, {time : "3:2", note : "F2", dur : "8n", prob : 0.6},
{time : "3:2 + 4t", note : "F2", dur : "8n", prob : 0.4}, {time : "3:2 + 4t*2", note : "B1", dur : "8n", prob : 0.9}]).start(0);
bassPart.loop = true;
bassPart.loopEnd = "4m";
2015-06-27 21:25:01 +00:00
//SYNTH
var synth = new Tone.DuoSynth({
"vibratoAmount" : 0.5,
"vibratoRate" : 5,
"portamento" : 0.1,
"harmonicity" : 1.005,
"volume" : 5,
"voice0" : {
"volume" : -2,
"oscillator" : {
"type" : "sawtooth"
2014-09-12 00:36:56 +00:00
},
"filter" : {
2015-06-27 21:25:01 +00:00
"Q" : 1,
"type" : "lowpass",
"rolloff" : -24
},
2014-09-12 00:36:56 +00:00
"envelope" : {
"attack" : 0.01,
2015-06-27 21:25:01 +00:00
"decay" : 0.25,
"sustain" : 0.4,
"release" : 1.2
2014-09-12 00:36:56 +00:00
},
"filterEnvelope" : {
"attack" : 0.001,
2015-06-27 21:25:01 +00:00
"decay" : 0.05,
"sustain" : 0.3,
"release" : 2,
2015-12-07 16:46:47 +00:00
"baseFrequency" : 100,
"octaves" : 4
2015-06-27 21:25:01 +00:00
}
},
"voice1" : {
"volume" : -10,
2015-03-01 00:36:10 +00:00
"oscillator" : {
2015-06-27 21:25:01 +00:00
"type" : "sawtooth"
2015-03-01 00:36:10 +00:00
},
"filter" : {
"Q" : 2,
"type" : "bandpass",
"rolloff" : -12
},
2014-09-12 00:36:56 +00:00
"envelope" : {
2015-06-27 21:25:01 +00:00
"attack" : 0.25,
"decay" : 4,
"sustain" : 0.1,
"release" : 0.8
2014-09-12 00:36:56 +00:00
},
"filterEnvelope" : {
2015-06-27 21:25:01 +00:00
"attack" : 0.05,
"decay" : 0.05,
"sustain" : 0.7,
"release" : 2,
2015-12-07 16:46:47 +00:00
"baseFrequency" : 5000,
"octaves" : -1.5
2014-09-12 00:36:56 +00:00
}
2015-06-27 21:25:01 +00:00
}
}).toMaster();
2015-02-25 05:49:03 +00:00
2015-06-27 21:25:01 +00:00
var synthNotes = ["C2", "E2", "G2", "A2",
"C3", "D3", "E3", "G3", "A3", "B3",
"C4", "D4", "E4", "G4", "A4", "B4", "C5"];
2014-09-12 00:36:56 +00:00
2015-06-27 21:25:01 +00:00
Tone.Transport.bpm.value = 125;
2014-09-12 00:36:56 +00:00
2015-06-27 21:25:01 +00:00
</script>
<script type="text/javascript">
2014-09-12 00:36:56 +00:00
2015-06-27 21:25:01 +00:00
$(function(){
2014-09-12 00:36:56 +00:00
2015-06-27 21:25:01 +00:00
new Interface.Button({
key : 32,
type : "toggle",
text : "Start",
activeText : "Stop",
start : function(){
Tone.Transport.start();
},
end : function(){
Tone.Transport.stop();
}
2014-09-12 00:36:56 +00:00
});
2015-06-27 21:25:01 +00:00
var lastSynthNote = synthNotes[0];
new Interface.Dragger({
// container : "#Content",
x : {
options : synthNotes,
drag : function(note){
synth.setNote(note);
lastSynthNote = note;
}
},
y : {
min : 0,
max : 2,
drag : function(val){
synth.vibratoAmount.value = val;
}
},
start : function(){
synth.triggerAttack(lastSynthNote);
},
end : function(){
synth.triggerRelease();
},
name : "Synth"
});
2014-09-12 00:36:56 +00:00
Interface.Loader();
2014-09-12 00:36:56 +00:00
2015-06-27 21:25:01 +00:00
});
2014-09-12 00:36:56 +00:00
</script>
</body>
</html>