mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 00:27:58 +00:00
restyling/refactoring examples
This commit is contained in:
Yotam Mann
parent
cbcbdf11b1
commit
9350e15eba
16 changed files with 7545 additions and 4663 deletions
|
|
@ -7,106 +7,71 @@
|
|||
<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="./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/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>
|
||||
<div id="Container">
|
||||
<div id="Explanation">
|
||||
Auto Panner
|
||||
<br>
|
||||
<br>
|
||||
An Auto Panner is a left/right panner with an LFO controlling
|
||||
the amount of pan. The effect is much more pronounced with headphones.
|
||||
</div>
|
||||
<div id="Content">
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* global Tone, GUI*/
|
||||
|
||||
//panner
|
||||
var panner = new Tone.AutoPanner();
|
||||
|
||||
//input signals
|
||||
var sine = new Tone.Oscillator();
|
||||
|
||||
//connect it up
|
||||
sine.connect(panner);
|
||||
sine.setVolume(-6);
|
||||
panner.toMaster();
|
||||
|
||||
//set the initial values
|
||||
panner.setDry(0);
|
||||
panner.setFrequency(1);
|
||||
|
||||
// GUI //
|
||||
|
||||
new GUI.TopBar(Tone);
|
||||
|
||||
var container = $("#Content");
|
||||
|
||||
new GUI.Checkbox(container, function(on){
|
||||
if (on){
|
||||
sine.start();
|
||||
panner.start();
|
||||
} else {
|
||||
sine.stop();
|
||||
}
|
||||
}, "start", "stop");
|
||||
|
||||
//frequency control
|
||||
$("<div>", {"class" : "Slider"}).slider({
|
||||
"orientation" : "horizontal",
|
||||
"min" : 1,
|
||||
"max" : 50,
|
||||
"value" : 10,
|
||||
"slide" : function(e, ui){
|
||||
var val = ui.value / 10;
|
||||
panner.setFrequency(val);
|
||||
freqValue.setValue(val);
|
||||
}
|
||||
}).appendTo(container);
|
||||
|
||||
var freqValue = new GUI.Value(container, 1, "Rate", "hz");
|
||||
|
||||
//dry wet control
|
||||
$("<div>", {"class" : "Slider"}).slider({
|
||||
"orientation" : "horizontal",
|
||||
"min" : 0,
|
||||
"max" : 100,
|
||||
"value" : 100,
|
||||
"slide" : function(e, ui){
|
||||
panner.setWet(ui.value / 100);
|
||||
wetValue.setValue(ui.value);
|
||||
}
|
||||
}).appendTo(container);
|
||||
|
||||
var wetValue = new GUI.Value(container, 100, "Amount", "%");
|
||||
|
||||
</script>
|
||||
<style type="text/css">
|
||||
#Content {
|
||||
text-align: center;
|
||||
}
|
||||
.Value {
|
||||
margin-top: 5px;
|
||||
display: block;
|
||||
}
|
||||
.Checkbox {
|
||||
[nx="slider"] {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
.Slider {
|
||||
margin-top: 15px;
|
||||
[nx="toggle"] {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
<div id="Explanation">
|
||||
Auto Panner
|
||||
<br>
|
||||
<br>
|
||||
An Auto Panner is a left/right panner with an LFO controlling
|
||||
the amount of pan. The effect is much more pronounced with headphones.
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="Rack"></div>
|
||||
<div id="Code"></div>
|
||||
</div>
|
||||
<script id="JSCode" type="text/javascript">
|
||||
//the panner
|
||||
var panner = new Tone.AutoPanner({
|
||||
"frequency" : 4,
|
||||
"amount" : 1
|
||||
}).toMaster();
|
||||
|
||||
//the input signal
|
||||
var osc = new Tone.Oscillator({
|
||||
"volume" : -6,
|
||||
"type" : "triangle"
|
||||
}).connect(panner);
|
||||
</script>
|
||||
<script id="gui" type="text/javascript">
|
||||
|
||||
Interface.Rack("Rack", "AutoPanner");
|
||||
|
||||
Interface.Toggle("Rack", function(on){
|
||||
if (on){
|
||||
panner.start();
|
||||
osc.start();
|
||||
} else {
|
||||
panner.stop();
|
||||
osc.stop();
|
||||
}
|
||||
})
|
||||
Interface.HorizontalSlider("Rack", panner, "amount");
|
||||
Interface.HorizontalSlider("Rack", panner, "frequency", 0.4, 10);
|
||||
Interface.Code("Code", "JSCode");
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -6,99 +6,89 @@
|
|||
|
||||
<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/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>
|
||||
<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>
|
||||
<style type="text/css">
|
||||
[nx="slider"] {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
[nx="keyboard"] {
|
||||
width: 100%;
|
||||
height: 75px;
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
<div id="Content">
|
||||
<div id="KeyRack">
|
||||
<div id="Keyboard"></div>
|
||||
</div>
|
||||
<div id="Rack"></div>
|
||||
<div id="CodeBlock"></div>
|
||||
</div>
|
||||
<script id="ToneCode" type="text/javascript">
|
||||
//the dry signal which goes to the master output
|
||||
var dry = Tone.context.createGain()
|
||||
.toMaster();
|
||||
|
||||
/* globals Tone, GUI */
|
||||
//the synth
|
||||
var synth = new Tone.MonoSynth()
|
||||
.setPreset("Barky")
|
||||
.connect(dry);
|
||||
|
||||
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
|
||||
//need to force the single channel synth
|
||||
//signal a stereo signal for the the chorus
|
||||
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;
|
||||
var chorusSend = mono.send("chorus", 0);
|
||||
var chebySend = synth.send("cheby", 0);
|
||||
var autowahSend = synth.send("autowah", 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 //
|
||||
var chorus = new Tone.Chorus()
|
||||
.receive("chorus")
|
||||
.setPreset("ether")
|
||||
.toMaster();
|
||||
var cheby = new Tone.Chebyshev(50)
|
||||
.receive("cheby")
|
||||
.toMaster();
|
||||
var autoWah = new Tone.AutoWah()
|
||||
.receive("autowah")
|
||||
.setPreset("talker")
|
||||
.toMaster();
|
||||
</script>
|
||||
<script id="gui" type="text/javascript">
|
||||
|
||||
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);
|
||||
Interface.Rack("KeyRack", "MonoSynth");
|
||||
Interface.Rack("Rack", "Sends");
|
||||
var keyboard = new QwertyHancock({
|
||||
id: "Keyboard",
|
||||
width: 200,
|
||||
width: $("#KeyRack").width(),
|
||||
height: 75,
|
||||
octaves: 1,
|
||||
startNote: "C4",
|
||||
whiteNotesColour: "white",
|
||||
blackNotesColour: "black",
|
||||
hoverColour: "#f3e939"
|
||||
octaves : 3,
|
||||
startNote: "A2",
|
||||
});
|
||||
keyboard.keyDown = function(note, freq){
|
||||
synth.triggerAttack(freq);
|
||||
|
|
@ -106,18 +96,18 @@
|
|||
keyboard.keyUp = function(){
|
||||
synth.triggerRelease();
|
||||
};
|
||||
Interface.HorizontalSlider("Rack", dry, "gain", 0, 1, 2).label = "dry";
|
||||
var chorusSlider = Interface.HorizontalSlider("Rack", chorusSend, "gain");
|
||||
var chebySlider = Interface.HorizontalSlider("Rack", chebySend, "gain");
|
||||
var autoSlider = Interface.HorizontalSlider("Rack", autowahSend, "gain");
|
||||
chorusSlider.label = "chorus";
|
||||
chebySlider.label = "chebyshev";
|
||||
autoSlider.label = "autowah";
|
||||
chorusSlider.draw();
|
||||
chebySlider.draw();
|
||||
autoSlider.draw();
|
||||
Interface.Code("CodeBlock", "ToneCode");
|
||||
|
||||
</script>
|
||||
<style type="text/css">
|
||||
#Content {
|
||||
width: 200px;
|
||||
}
|
||||
.Slider {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#Keyboard {
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load diff
6602
examples/deps/nexusUI.js
Normal file
6602
examples/deps/nexusUI.js
Normal file
File diff suppressed because it is too large
Load diff
4
examples/deps/prism.js
Normal file
4
examples/deps/prism.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
/* http://prismjs.com/download.html?themes=prism&languages=clike+javascript */
|
||||
self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{};var Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=t.util.clone(e[r]));return a;case"Array":return e.map(function(e){return t.util.clone(e)})}return e}},languages:{extend:function(e,n){var a=t.util.clone(t.languages[e]);for(var r in n)a[r]=n[r];return a},insertBefore:function(e,n,a,r){r=r||t.languages;var i=r[e];if(2==arguments.length){a=arguments[1];for(var l in a)a.hasOwnProperty(l)&&(i[l]=a[l]);return i}var o={};for(var s in i)if(i.hasOwnProperty(s)){if(s==n)for(var l in a)a.hasOwnProperty(l)&&(o[l]=a[l]);o[s]=i[s]}return t.languages.DFS(t.languages,function(t,n){n===r[e]&&t!=e&&(this[t]=o)}),r[e]=o},DFS:function(e,n,a){for(var r in e)e.hasOwnProperty(r)&&(n.call(e,r,e[r],a||r),"Object"===t.util.type(e[r])?t.languages.DFS(e[r],n):"Array"===t.util.type(e[r])&&t.languages.DFS(e[r],n,r))}},highlightAll:function(e,n){for(var a,r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),i=0;a=r[i++];)t.highlightElement(a,e===!0,n)},highlightElement:function(a,r,i){for(var l,o,s=a;s&&!e.test(s.className);)s=s.parentNode;if(s&&(l=(s.className.match(e)||[,""])[1],o=t.languages[l]),o){a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,s=a.parentNode,/pre/i.test(s.nodeName)&&(s.className=s.className.replace(e,"").replace(/\s+/g," ")+" language-"+l);var g=a.textContent;if(g){g=g.replace(/^(?:\r?\n|\r)/,"");var u={element:a,language:l,grammar:o,code:g};if(t.hooks.run("before-highlight",u),r&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){u.highlightedCode=n.stringify(JSON.parse(e.data),l),t.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,i&&i.call(u.element),t.hooks.run("after-highlight",u)},c.postMessage(JSON.stringify({language:u.language,code:u.code}))}else u.highlightedCode=t.highlight(u.code,u.grammar,u.language),t.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,i&&i.call(a),t.hooks.run("after-highlight",u)}}},highlight:function(e,a,r){var i=t.tokenize(e,a);return n.stringify(t.util.encode(i),r)},tokenize:function(e,n){var a=t.Token,r=[e],i=n.rest;if(i){for(var l in i)n[l]=i[l];delete n.rest}e:for(var l in n)if(n.hasOwnProperty(l)&&n[l]){var o=n[l];o="Array"===t.util.type(o)?o:[o];for(var s=0;s<o.length;++s){var g=o[s],u=g.inside,c=!!g.lookbehind,f=0,h=g.alias;g=g.pattern||g;for(var p=0;p<r.length;p++){var d=r[p];if(r.length>e.length)break e;if(!(d instanceof a)){g.lastIndex=0;var m=g.exec(d);if(m){c&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),O=[p,1];b&&O.push(b);var N=new a(l,u?t.tokenize(m,u):m,h);O.push(N),w&&O.push(w),Array.prototype.splice.apply(r,O)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("[object Array]"==Object.prototype.toString.call(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+o+">"+i.content+"</"+i.tag+">"},!self.document)return self.addEventListener?(self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),self.close()},!1),self.Prism):self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism);;
|
||||
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//g,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*?(\r?\n|$)/g,lookbehind:!0}],string:/("|')(\\\n|\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/gi,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/gi,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|~|\^|%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};;
|
||||
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|-?Infinity)\b/g,"function":/(?!\d)[a-z0-9_$]+(?=\()/gi}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/gi,inside:{tag:{pattern:/<script[\w\W]*?>|<\/script>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript},alias:"language-javascript"}});;
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
key.el.style.borderRight = 0;
|
||||
key.el.style.height = settings.height + 'px';
|
||||
key.el.style.width = key.width + 'px';
|
||||
key.el.style.borderRadius = '0 0 5px 5px';
|
||||
key.el.style.borderRadius = '0 0 2px 2px';
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -5,77 +5,73 @@
|
|||
<title>Envelope</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="./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="../build/Tone.Preset.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery.min.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>
|
||||
<div id="Container">
|
||||
<div id="Explanation">
|
||||
ADSR Envelope
|
||||
<br>
|
||||
<br>
|
||||
Click the button to trigger the attack/decay portion of the envelope.
|
||||
Let go of the button to trigger the release.
|
||||
</div>
|
||||
<div id="Content"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
/* global Tone, GUI*/
|
||||
|
||||
var env = new Tone.Envelope(0.05, 0.01, 0.4, 0.4);
|
||||
|
||||
var osc = new Tone.Oscillator(440, "square");
|
||||
|
||||
//connect the envelope to the output gain
|
||||
env.connect(osc.output.gain);
|
||||
|
||||
//start the oscillator
|
||||
osc.toMaster();
|
||||
osc.start();
|
||||
|
||||
// GUI //
|
||||
|
||||
$(function(){
|
||||
var container = $("#Content");
|
||||
|
||||
new GUI.TopBar(Tone);
|
||||
|
||||
//sliders for the envelope controls
|
||||
new GUI.Envelope(container, env, "envelope");
|
||||
|
||||
new GUI.Momentary(container, function(down){
|
||||
if (down){
|
||||
env.triggerAttack();
|
||||
} else {
|
||||
env.triggerRelease();
|
||||
}
|
||||
}, "attack", "release");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
#Content {
|
||||
text-align: center;
|
||||
width: 180px;
|
||||
height: 200px;
|
||||
[nx="button"] {
|
||||
width: 20%;
|
||||
height: 80px;
|
||||
}
|
||||
.Envelope {
|
||||
margin: auto;
|
||||
}
|
||||
.Momentary {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
width: 80%;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
<div id="Explanation">
|
||||
ADSR Envelope
|
||||
<br>
|
||||
<br>
|
||||
Click the button to trigger the attack/decay portion of the envelope.
|
||||
Let go of the button to trigger the release.
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="Rack"></div>
|
||||
<div id="CodeBlock"></div>
|
||||
</div>
|
||||
|
||||
<script id="ToneCode" type="text/javascript">
|
||||
var env = new Tone.AmplitudeEnvelope({
|
||||
"attack" : 0.01,
|
||||
"decay" : 0.02,
|
||||
"sustain" : 0.09,
|
||||
"release" : 1.2
|
||||
}).toMaster();
|
||||
|
||||
var osc = new Tone.Oscillator(440, "square")
|
||||
.connect(env)
|
||||
.start();
|
||||
|
||||
//just so it's not soo loud.
|
||||
osc.volume.value = -6;
|
||||
</script>
|
||||
<script id="GUI" type="text/javascript">
|
||||
Interface.Rack("Rack", "Envelope");
|
||||
Interface.Momentary("Rack", function(down){
|
||||
if (down){
|
||||
env.triggerAttack();
|
||||
} else {
|
||||
env.triggerRelease();
|
||||
}
|
||||
});
|
||||
Interface.AmplitudeEnvelope("Rack", env);
|
||||
Interface.Code("CodeBlock", "ToneCode");
|
||||
</script>
|
||||
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<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>
|
||||
<script type="text/javascript" src="./scripts/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>
|
||||
|
|
|
|||
|
|
@ -6,36 +6,58 @@
|
|||
|
||||
<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="./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="../build/Tone.Preset.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery.min.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>
|
||||
|
||||
<div id="Container">
|
||||
<div id="Explanation">
|
||||
JSON Sandbox
|
||||
<br>
|
||||
<br>
|
||||
GUIs are limited. The power of a library like Tone comes from being able to set any value you want,
|
||||
not just the predescribed ranges of a GUI. Instruments and effects can be created and set
|
||||
with object descriptions like the one above. Edit the values of the JSON descriptions for the score
|
||||
and the MonoSynths then click 'reload' to hear your changes.
|
||||
<style type="text/css">
|
||||
textarea {
|
||||
width: 98%;
|
||||
height: auto;
|
||||
resize: none;
|
||||
border: 0px;
|
||||
background-color: transparent;
|
||||
}
|
||||
[nx="toggle"] {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
<div id="Explanation">
|
||||
JSON Sandbox
|
||||
<br>
|
||||
<br>
|
||||
GUIs are limited. The power of a library like Tone comes from being able to set any value you want,
|
||||
not just the predescribed ranges of a GUI. Instruments and effects can be created and set
|
||||
with object descriptions like the ones below. Edit the values of the JSON descriptions for the score
|
||||
and the synth then hit "enter" to hear your changes.
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="Transport"></div>
|
||||
<div id="Synth">
|
||||
<textarea rows="26"></textarea>
|
||||
</div>
|
||||
<div id="Content"></div>
|
||||
<div id="Score">
|
||||
<textarea></textarea>
|
||||
</div>
|
||||
<div id="CodeBlock"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
/* globals Tone, GUI */
|
||||
|
||||
var synthOptions = {
|
||||
"volume" : -10,
|
||||
"portamento" : 0.05,
|
||||
"oscillator" : {
|
||||
"type" : "square"
|
||||
|
|
@ -60,124 +82,87 @@
|
|||
"max": 4000
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
var synth = new Tone.MonoSynth(synthOptions);
|
||||
synth.setVolume(-10);
|
||||
synth.toMaster();
|
||||
<script id="ToneCode" type="text/javascript">
|
||||
|
||||
//use the synth presets defined in the JSON
|
||||
var synth = new Tone.MonoSynth(synthOptions).toMaster();
|
||||
|
||||
var synthPart = [["0", "C2"], ["1*8n", "C4"], ["2*8n", "E4"], ["3*8n", "B3"],
|
||||
//define a score to start with
|
||||
var score = [["0", "C2"], ["1*8n", "C4"], ["2*8n", "E4"], ["3*8n", "B3"],
|
||||
["4*8n", "G3"], ["5*8n", "C2"], ["6*8n", "C4"], ["7*8n", "B1"]];
|
||||
|
||||
//parse the score
|
||||
Tone.Note.parseScore({
|
||||
"synth" : synthPart
|
||||
"synth" : score
|
||||
});
|
||||
|
||||
Tone.Transport.setLoopEnd("1:0");
|
||||
Tone.Transport.loop = true;
|
||||
|
||||
//listen for callbacks on that channel and trigger the synth
|
||||
Tone.Note.route("synth", function(time, note){
|
||||
synth.triggerAttackRelease(note, "8n", time);
|
||||
});
|
||||
|
||||
//loop the transport
|
||||
Tone.Transport.setLoopEnd("1:0");
|
||||
Tone.Transport.loop = true;
|
||||
|
||||
// GUI //
|
||||
</script>
|
||||
|
||||
new GUI.TopBar(Tone);
|
||||
<script id="GUI" type="text/javascript">
|
||||
|
||||
var content = $("#Content");
|
||||
|
||||
new GUI.Checkbox(content, function(on){
|
||||
Interface.Rack("Transport", "Transport");
|
||||
Interface.Toggle("Transport", function(on){
|
||||
if (on){
|
||||
Tone.Transport.start();
|
||||
} else {
|
||||
Tone.Transport.stop();
|
||||
}
|
||||
}, "start", "stop");
|
||||
})
|
||||
Interface.Rack("Synth", "Synth", true);
|
||||
Interface.Rack("Score", "Score", true);
|
||||
Interface.Code("CodeBlock", "ToneCode");
|
||||
|
||||
content.append("<br><br>");
|
||||
var synthText = $("#Synth textarea");
|
||||
var scoreText = $("#Score textarea");
|
||||
|
||||
$("<div>", {"class" : "Code"}).appendTo(content).text("var synthOptions = ");
|
||||
synthText.text(JSON.stringify(synthOptions, null, "\t"));
|
||||
scoreText.text(JSON.stringify(score));
|
||||
|
||||
var synthInput = $("<textarea>", {"id" : "Synth"})
|
||||
.attr("rows", 10)
|
||||
.attr("cols", 50)
|
||||
.appendTo(content)
|
||||
.val(JSON.stringify(synthOptions, null, 4));
|
||||
|
||||
content.append("<br><br>");
|
||||
|
||||
$("<div>", {"class" : "Code"}).appendTo(content).text("var score = {");
|
||||
$("<span>").appendTo(content).text("\"synth\" :");
|
||||
var scoreInput = $("<textarea>", {"id" : "Score"})
|
||||
.attr("rows", 4)
|
||||
.appendTo(content)
|
||||
.keyup(function (e) {
|
||||
if (e.keyCode == 13) {
|
||||
reloadParameters();
|
||||
synthText.keypress(function(e){
|
||||
if (e.which === 13){
|
||||
e.preventDefault();
|
||||
synthText.blur();
|
||||
//reload the parameters
|
||||
try {
|
||||
var options = JSON.parse(synthText.val());
|
||||
synth.set(options);
|
||||
synthOptions = options;
|
||||
} catch (e){
|
||||
console.log("syntax error: "+e);
|
||||
synthText.val(JSON.stringify(synthOptions, null, "\t"));
|
||||
}
|
||||
})
|
||||
.val(JSON.stringify(synthPart));
|
||||
$("<div>", {"class" : "Code"}).appendTo(content).text("}");
|
||||
|
||||
content.append("<br>");
|
||||
|
||||
//reload button
|
||||
$("<div>", {"id" : "Reload"})
|
||||
.text("reload parameters")
|
||||
.button()
|
||||
.appendTo(content)
|
||||
.click(reloadParameters);
|
||||
function reloadParameters(){
|
||||
try {
|
||||
synthOptions = JSON.parse(synthInput.val());
|
||||
synth.set(synthOptions);
|
||||
var scorePart = JSON.parse(scoreInput.val());
|
||||
Tone.Transport.clearTimelines();
|
||||
Tone.Note.parseScore({
|
||||
"synth" : scorePart
|
||||
});
|
||||
} catch (e){
|
||||
$("<div id='dialog' title='Reload Error'></div>")
|
||||
.appendTo($("body"))
|
||||
.text(e)
|
||||
.dialog();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
scoreText.keypress(function(e){
|
||||
if (e.which === 13){
|
||||
e.preventDefault();
|
||||
scoreText.blur();
|
||||
//reload the parameters
|
||||
try {
|
||||
var options = JSON.parse(scoreText.val());
|
||||
Tone.Transport.clearTimelines();
|
||||
Tone.Note.parseScore({
|
||||
"synth" : score
|
||||
});
|
||||
score = options;
|
||||
} catch (e){
|
||||
console.log("syntax error: "+e);
|
||||
scoreText.val(JSON.stringify(score));
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
#Content {
|
||||
text-align: left;
|
||||
width: 300px;
|
||||
height: auto;
|
||||
}
|
||||
#Content * {
|
||||
font-family: monospace;
|
||||
}
|
||||
#Synth {
|
||||
margin-left: 10px;
|
||||
width: calc(100% - 10px);
|
||||
height: 305px;
|
||||
resize: none;
|
||||
}
|
||||
#Score {
|
||||
margin-left: 10px;
|
||||
width: 218px;
|
||||
/*height: 25px;*/
|
||||
resize: none;
|
||||
}
|
||||
span {
|
||||
vertical-align: top;
|
||||
}
|
||||
.Checkbox {
|
||||
width: 100%;
|
||||
}
|
||||
#Reload {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -6,77 +6,62 @@
|
|||
|
||||
<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="./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="../build/Tone.Preset.js"></script>
|
||||
<script type="text/javascript" src="./deps/jquery.min.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>
|
||||
|
||||
<div id="Container">
|
||||
<div id="Explanation">
|
||||
Noise
|
||||
<br>
|
||||
<br>
|
||||
Tone has 3 different types of noise. Here's a little noise song.
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="Button"></div>
|
||||
<div id='Noise'></div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* globals Tone, GUI */
|
||||
|
||||
var noise = new Tone.Noise();
|
||||
noise.setVolume(-20);
|
||||
noise.toMaster();
|
||||
|
||||
var noiseTypes = ["white", "brown", "pink"];
|
||||
|
||||
Tone.Transport.setInterval(function(time){
|
||||
//set a random noise type
|
||||
var randomIndex = Math.floor(Math.random()* noiseTypes.length);
|
||||
var randomNoise = noiseTypes[randomIndex];
|
||||
noise.setType(randomNoise, time);
|
||||
$("#Noise").text(randomNoise);
|
||||
}, "8n");
|
||||
|
||||
//stop it after 4 measures
|
||||
Tone.Transport.setTimeout(function(time){
|
||||
noise.stop(time);
|
||||
Tone.Transport.stop();
|
||||
$("#Noise").text("done");
|
||||
setTimeout(function(){
|
||||
$("#Noise").text("");
|
||||
}, 500);
|
||||
}, "4m");
|
||||
|
||||
// GUI //
|
||||
|
||||
new GUI.TopBar(Tone);
|
||||
|
||||
new GUI.Momentary($("#Button"), function(){
|
||||
Tone.Transport.start();
|
||||
noise.start();
|
||||
$("#Button").remove();
|
||||
}, "start", "");
|
||||
|
||||
<style type="text/css">
|
||||
[nx="toggle"]{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
[nx="select"]{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
<div id="Explanation">
|
||||
Noise
|
||||
<br>
|
||||
<br>
|
||||
Tone has 3 different types of noise. Careful, it's loud!
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="Rack"></div>
|
||||
<div id="CodeRack"></div>
|
||||
</div>
|
||||
<script id="ToneCode" type="text/javascript">
|
||||
//make the noise and connect it to the output
|
||||
var noise = new Tone.Noise().toMaster();
|
||||
//so it's not too loud
|
||||
noise.volume.value = -20;
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
#Content {
|
||||
text-align: center;
|
||||
width: 120px;
|
||||
}
|
||||
#Content .Momentary{
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script id="GUI" type="text/javascript">
|
||||
Interface.Rack("Rack", "Noise");
|
||||
Interface.Toggle("Rack", function(on){
|
||||
if (on){
|
||||
noise.start();
|
||||
} else {
|
||||
noise.stop();
|
||||
}
|
||||
});
|
||||
Interface.DropDown("Rack", ["white", "brown", "pink"], function(which){
|
||||
noise.type = which;
|
||||
});
|
||||
Interface.Code("CodeRack", "ToneCode");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -7,63 +7,71 @@
|
|||
<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="./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/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>
|
||||
<div id="Container">
|
||||
<div id="Explanation">
|
||||
Player
|
||||
<br>
|
||||
<br>
|
||||
Press and hold to hear a 10ms grain of audio.
|
||||
</div>
|
||||
<div id="Content">
|
||||
<div id="Loading">Loading...</div>
|
||||
</div>
|
||||
<style type="text/css">
|
||||
[nx="range"]{
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
}
|
||||
[nx="toggle"]{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
<div id="Explanation">
|
||||
Player
|
||||
<br>
|
||||
<br>
|
||||
Press "on" to hear a grain from the player. Change the start and end points of the grain by adjusting the range slider.
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
|
||||
/* globals Tone, GUI */
|
||||
|
||||
var player = new Tone.Player("./audio/casio/A1.mp3", function(){
|
||||
$("#Loading").remove();
|
||||
});
|
||||
|
||||
<div id="Content">
|
||||
<div id="LoadingBar"></div>
|
||||
<div id="Rack"></div>
|
||||
<div id="Code"></div>
|
||||
</div>
|
||||
<script id="ToneCode" type="text/javascript">
|
||||
//the player
|
||||
var player = new Tone.Player("./audio/casio/A1.mp3")
|
||||
.toMaster();
|
||||
//loop setting
|
||||
player.loop = true;
|
||||
player.loopStart = 0.1;
|
||||
player.loopEnd = 0.11;
|
||||
|
||||
//connect it to the output
|
||||
player.toMaster();
|
||||
|
||||
// GUI //
|
||||
|
||||
new GUI.TopBar(Tone);
|
||||
|
||||
new GUI.Momentary($("#Content"), function(on){
|
||||
</script>
|
||||
|
||||
<script id="GUI" type="text/javascript">
|
||||
var duration = 2.521655328798186;
|
||||
Interface.Loading("LoadingBar");
|
||||
Interface.Toggle("Rack", function(on){
|
||||
if (on){
|
||||
player.start();
|
||||
} else {
|
||||
player.stop();
|
||||
}
|
||||
}, "start", "stop");
|
||||
|
||||
});
|
||||
Interface.Rack("Rack", "Player");
|
||||
var range = Interface.Range("Rack", function(data){
|
||||
player.loopStart = data.start * duration;
|
||||
player.loopEnd = data.stop * duration;
|
||||
});
|
||||
range.label = "grain";
|
||||
range.val.start = duration * player.loopStart;
|
||||
range.val.stop = duration * player.loopEnd;
|
||||
range.draw();
|
||||
Interface.Code("Code", "ToneCode");
|
||||
</script>
|
||||
<style type="text/css">
|
||||
#Content {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
.Momentary {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -15,7 +15,6 @@ var ExampleList = {
|
|||
"AutoPanner" : "autoPanner",
|
||||
"PingPongDelay" : "pingPongDelay",
|
||||
"Buses" : "buses",
|
||||
"Convolver" : "convolver"
|
||||
},
|
||||
"Instruments" : {
|
||||
"MonoSynth" : "monoSynth",
|
||||
231
examples/scripts/Interface.js
Normal file
231
examples/scripts/Interface.js
Normal file
|
|
@ -0,0 +1,231 @@
|
|||
/* globals Tone, nx */
|
||||
|
||||
//nexusUI setup
|
||||
nx.showLabels = true;
|
||||
nx.colorize("accent", "#D76767");
|
||||
nx.colorize("fill", "#fff");
|
||||
|
||||
var Interface = {};
|
||||
|
||||
$(function(){
|
||||
var topbar = $("<div>").attr("id", "TopBar");
|
||||
$("body").prepend(topbar);
|
||||
$("<div>")
|
||||
.attr("id", "Homepage")
|
||||
.attr("title", "github")
|
||||
.html("<a href='http://github.com/TONEnoTONE/Tone.js'>Tone.js</a>")
|
||||
.appendTo(topbar);
|
||||
$("<div>")
|
||||
.attr("id", "Examples")
|
||||
.attr("title", "examples")
|
||||
.html("<a href='./index.html'>examples</a>")
|
||||
.appendTo(topbar);
|
||||
//get the master output
|
||||
if (Tone && Tone.Master){
|
||||
var meter = new Tone.Meter(2);
|
||||
Tone.Master.connect(meter);
|
||||
var meterElement = $("<div>").attr("id", "Meter").appendTo(topbar);
|
||||
var leftLevel = $("<div>").addClass("Level")
|
||||
.attr("id", "Left")
|
||||
.appendTo(meterElement);
|
||||
var rightLevel = $("<div>").addClass("Level")
|
||||
.attr("id", "Right")
|
||||
.appendTo(meterElement);
|
||||
function update(){
|
||||
requestAnimationFrame(update);
|
||||
var leftHeight = 100 - Math.max(Math.min(Math.abs(meter.getDb(0)), 100), 0);
|
||||
var rightHeight = 100 - Math.max(Math.min(Math.abs(meter.getDb(1)), 100), 0);
|
||||
leftLevel.height(leftHeight + "%");
|
||||
rightLevel.height(rightHeight + "%");
|
||||
}
|
||||
update();
|
||||
}
|
||||
});
|
||||
|
||||
$(window).resize(function(){
|
||||
for (var name in nx.widgets){
|
||||
var widg = nx.widgets[name];
|
||||
widg.init();
|
||||
}
|
||||
});
|
||||
|
||||
Interface.Rack = function(id, name, collapsible){
|
||||
var element = $("#"+id);
|
||||
element.addClass("Rack");
|
||||
var title = $("<div>").addClass("Title").text(name);
|
||||
element.prepend(title);
|
||||
title.on("click touch", function(){
|
||||
element.toggleClass("Expanded");
|
||||
});
|
||||
if (collapsible){
|
||||
element.addClass("Collapsible");
|
||||
}
|
||||
return {
|
||||
close : function(){
|
||||
element.removeClass("Expanded");
|
||||
},
|
||||
open : function(){
|
||||
element.addClass("Expanded");
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
Interface.Toggle = function(container, callback){
|
||||
var toggle = nx.add("toggle", {
|
||||
parent : container
|
||||
});
|
||||
toggle.on("value", function(val){
|
||||
callback(val === 1);
|
||||
});
|
||||
};
|
||||
|
||||
Interface.DropDown = function(container, options, callback){
|
||||
var select = nx.add("select", {
|
||||
parent : container
|
||||
});
|
||||
select.choices = options;
|
||||
select.init();
|
||||
select.on("text", function(val){
|
||||
callback(val);
|
||||
});
|
||||
};
|
||||
|
||||
Interface.ContinuousControl = function(container, type, node, parameter, min, max, exp){
|
||||
min = min || 0;
|
||||
max = max || 1;
|
||||
exp = exp || 1;
|
||||
var isTone = (node[parameter] instanceof Tone || node[parameter] instanceof AudioParam);
|
||||
var currentValue = isTone?node[parameter].value : node[parameter];
|
||||
currentValue = nx.scale(currentValue, min, max, 0, 1);
|
||||
currentValue = Math.pow(currentValue, 1/exp);
|
||||
var slider = nx.add(type, {
|
||||
parent : container,
|
||||
});
|
||||
slider.val.value = currentValue;
|
||||
slider.label = parameter;
|
||||
slider.on("value", function(val){
|
||||
val = Math.pow(val, exp);
|
||||
var scaledVal = nx.scale(val, 0, 1, min, max);
|
||||
if (isTone){
|
||||
node[parameter].value = scaledVal;
|
||||
} else {
|
||||
node[parameter] = scaledVal;
|
||||
}
|
||||
});
|
||||
slider.draw();
|
||||
slider.listen = function(){
|
||||
requestAnimationFrame(slider.listen);
|
||||
var val = node[parameter];
|
||||
if (isTone){
|
||||
val = node[parameter].value;
|
||||
}
|
||||
val = nx.scale(val, min, max, 0, 1);
|
||||
val = Math.pow(val, 1/exp);
|
||||
if (val !== slider.val.value){
|
||||
slider.val.value = val;
|
||||
slider.draw();
|
||||
}
|
||||
};
|
||||
return slider;
|
||||
};
|
||||
|
||||
Interface.Slider = function(container, node, parameter, min, max, exp){
|
||||
return Interface.ContinuousControl(container, "slider", node, parameter, min, max, exp);
|
||||
};
|
||||
|
||||
Interface.HorizontalSlider = function(container, node, parameter, min, max, exp){
|
||||
var slider = Interface.Slider(container, node, parameter, min, max, exp);
|
||||
$(slider.canvas).addClass("HorizontalSlider");
|
||||
return slider;
|
||||
};
|
||||
|
||||
Interface.Code = function(container, codeID){
|
||||
Interface.Rack(container, "Code", true);
|
||||
var element = $("#"+container);
|
||||
var codeContainer = $("<code>").addClass("language-javascript Code");
|
||||
element.append(codeContainer);
|
||||
var code = $("#"+codeID);
|
||||
var codeText = code.text();
|
||||
var lines = codeText.split("\n");
|
||||
//remove the same level of indentation for everyone
|
||||
while(lines[1].charAt(0)==="\t"){
|
||||
for (var i = 0; i < lines.length; i++){
|
||||
var line = lines[i];
|
||||
lines[i] = line.substr(1);
|
||||
}
|
||||
}
|
||||
codeText = lines.join("\n");
|
||||
codeContainer.text(codeText);
|
||||
codeContainer.addClass("Code");
|
||||
};
|
||||
|
||||
Interface.Knob = function(container, node, parameter, min, max, exp){
|
||||
return Interface.ContinuousControl(container, "dial", node, parameter, min, max, exp);
|
||||
};
|
||||
|
||||
Interface.Momentary = function(container, callback){
|
||||
var button = nx.add("button", {
|
||||
"parent" : container
|
||||
});
|
||||
button.on("press", function(val){
|
||||
callback(val === 1);
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
Interface.AmplitudeEnvelope = function(container, node){
|
||||
var element = $("#"+container);
|
||||
var group = $("<div>").addClass("Envelope")
|
||||
.appendTo(element);
|
||||
var attack = Interface.Knob(group[0], node, "attack", 0.001, 2, 2);
|
||||
var decay = Interface.Knob(group[0], node, "decay", 0.0, 2, 2);
|
||||
var sustain = Interface.Knob(group[0], node, "sustain", 0, 1, 2);
|
||||
var release = Interface.Knob(group[0], node, "release", 0.001, 4, 2);
|
||||
var labels = $("<div>").attr("id", "Labels")
|
||||
.appendTo(group);
|
||||
$("<div>").appendTo(labels).addClass("Label").text("attack");
|
||||
$("<div>").appendTo(labels).addClass("Label").text("decay");
|
||||
$("<div>").appendTo(labels).addClass("Label").text("sustain");
|
||||
$("<div>").appendTo(labels).addClass("Label").text("release");
|
||||
|
||||
return {
|
||||
listen : function(){
|
||||
attack.listen();
|
||||
decay.listen();
|
||||
release.listen();
|
||||
sustain.listen();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
Interface.Loading = function(containerID, callback){
|
||||
var element = $("#"+containerID);
|
||||
element.addClass("LoadingBar");
|
||||
var loader = $("<div>").appendTo(element)
|
||||
.attr("id", "Loader");
|
||||
Tone.Buffer.onprogress = function(percent){
|
||||
loader.width((percent * 100) + "%");
|
||||
};
|
||||
Tone.Buffer.onload = function(){
|
||||
element.css({
|
||||
height: 0,
|
||||
opacity : 0,
|
||||
margin: 0
|
||||
});
|
||||
setTimeout(function(){
|
||||
element.remove();
|
||||
}, 500);
|
||||
if (callback){
|
||||
callback();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
Interface.Range = function(containerID, callback){
|
||||
var range = nx.add("range", {
|
||||
"parent" : containerID
|
||||
});
|
||||
range.label = "";
|
||||
range.on("*", callback);
|
||||
return range;
|
||||
};
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<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="./Widgets.js"></script>
|
||||
<script type="text/javascript" src="./ExampleList.js"></script>
|
||||
<script type="text/javascript" src="./scripts/ExampleList.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./style/widgets.css">
|
||||
<link rel="stylesheet" type="text/css" href="./style/jquery-ui.css">
|
||||
|
||||
|
|
|
|||
173
examples/style/examples.css
Normal file
173
examples/style/examples.css
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
/**
|
||||
* GLOBAL
|
||||
*/
|
||||
canvas {
|
||||
border-radius: 0px !important;
|
||||
margin-top: 5px; }
|
||||
|
||||
/* FOR MOBILES */
|
||||
@media (max-width: 320px) {
|
||||
#TopBar #Homepage a {
|
||||
font-size: 16px !important; }
|
||||
|
||||
#Content {
|
||||
font-size: 10px !important;
|
||||
max-width: 100% !important; } }
|
||||
body {
|
||||
margin: 0px; }
|
||||
|
||||
#Explanation {
|
||||
font-family: monospace;
|
||||
background-color: #EAEAEA;
|
||||
padding: 10px;
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
margin: 10px;
|
||||
width: calc(100% - 4 * 10px); }
|
||||
|
||||
#Explanation a {
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
font-size: 14px; }
|
||||
|
||||
/* TOP BAR */
|
||||
#TopBar {
|
||||
background-color: black;
|
||||
height: 40px;
|
||||
margin: 10px;
|
||||
position: relative;
|
||||
width: calc(100% - 2 * 10px);
|
||||
font-family: monospace; }
|
||||
#TopBar #Homepage {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-left: 20px;
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
color: white; }
|
||||
#TopBar #Homepage a {
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
margin-left: 0px; }
|
||||
#TopBar #Examples {
|
||||
left: 50%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: absolute; }
|
||||
#TopBar #Examples a {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
text-align: center;
|
||||
color: white;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
margin-left: 0px; }
|
||||
#TopBar #Meter {
|
||||
width: 50px;
|
||||
height: 90%;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 5%; }
|
||||
#TopBar #Meter .Level {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 47%;
|
||||
background-color: #59d72e;
|
||||
bottom: 0px; }
|
||||
#TopBar #Meter #Left {
|
||||
left: 0px; }
|
||||
#TopBar #Meter #Right {
|
||||
right: 0px; }
|
||||
|
||||
#Content {
|
||||
font-family: monospace;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
height: auto;
|
||||
margin-top: 20px;
|
||||
width: 75%;
|
||||
min-width: 320px;
|
||||
max-width: 640px;
|
||||
height: auto;
|
||||
/**
|
||||
* THE RACK
|
||||
*/
|
||||
/**
|
||||
* CODE BLOCK
|
||||
*/
|
||||
/**
|
||||
* ENVELOPE
|
||||
*/
|
||||
/**
|
||||
* LOADING BAR
|
||||
*/ }
|
||||
#Content .Rack {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
background-color: #EAEAEA;
|
||||
border: 10px solid #EAEAEA;
|
||||
position: relative; }
|
||||
#Content .Rack .Title {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 0px 0 5px;
|
||||
background-color: black;
|
||||
font-size: 1.2em;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
text-align: center; }
|
||||
#Content .Rack.Collapsible .Title:after {
|
||||
content: "\25B2";
|
||||
position: absolute;
|
||||
right: 5px; }
|
||||
#Content .Rack.Collapsible.Expanded .Title:after {
|
||||
transform: rotate(-180deg); }
|
||||
#Content .Rack.Collapsible {
|
||||
overflow: hidden;
|
||||
height: 20px; }
|
||||
#Content .Rack.Collapsible.Expanded {
|
||||
height: auto; }
|
||||
#Content .Code {
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
height: auto;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
/*padding: $Margin;*/
|
||||
/*line-height: ;*/
|
||||
background-color: #EAEAEA; }
|
||||
#Content .Envelope {
|
||||
display: inline-block; }
|
||||
#Content .Envelope canvas {
|
||||
width: 25%;
|
||||
height: calc(100% - 8px - 10px);
|
||||
position: relative; }
|
||||
#Content .Envelope #Labels {
|
||||
width: 100%;
|
||||
height: 8px; }
|
||||
#Content .Envelope #Labels .Label {
|
||||
text-transform: uppercase;
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-size: 8px;
|
||||
display: inline-block; }
|
||||
#Content .LoadingBar {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
transition: all 0.4s; }
|
||||
#Content .LoadingBar #Loader {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background-color: #EAEAEA;
|
||||
transition: width 0.2s; }
|
||||
|
||||
/*# sourceMappingURL=examples.css.map */
|
||||
137
examples/style/prism.css
Normal file
137
examples/style/prism.css
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
/* http://prismjs.com/download.html?themes=prism&languages=clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #a67f59;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue