2014-10-22 22:49:42 +00:00
<!DOCTYPE html>
2014-06-23 21:00:51 +00:00
< html >
< head >
2014-10-22 22:49:42 +00:00
< meta charset = "utf-8" >
2015-02-24 17:03:22 +00:00
< title > SCORE< / title >
2014-06-23 21:00:51 +00:00
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-06 19:35:31 +00:00
2014-09-04 19:20:25 +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 >
2015-12-05 18:20:53 +00:00
< script type = "text/javascript" src = "./scripts/draggabilly.js" > < / script >
< script type = "text/javascript" src = "./scripts/Logo.js" > < / script >
2016-03-04 22:38:32 +00:00
< script type = "text/javascript" src = "./scripts/StartAudioContext.js" > < / script >
2015-02-24 17:03:22 +00:00
< script type = "text/javascript" src = "./scripts/Interface.js" > < / script >
2015-06-27 21:25:01 +00:00
< script type = "text/javascript" src = "./scripts/nexusUI.js" > < / script >
2015-02-24 17:03:22 +00:00
< link rel = "stylesheet" type = "text/css" href = "./style/examples.css" >
2014-06-23 21:00:51 +00:00
2014-06-24 16:12:56 +00:00
< script type = "text/javascript" >
2015-02-24 17:03:22 +00:00
// jshint ignore: start
< / script >
2014-06-23 21:00:51 +00:00
2015-02-24 17:03:22 +00:00
< / head >
< body >
< style type = "text/css" >
2015-06-27 21:25:01 +00:00
canvas {
margin-top: 3px;
}
2015-02-24 17:03:22 +00:00
< / style >
2015-12-05 18:20:53 +00:00
< div id = "Content" >
2015-06-27 21:25:01 +00:00
< div id = "Title" > Tone.Transport< / div >
< div id = "Explanation" >
2015-06-27 22:02:55 +00:00
< a href = "http://tonejs.org/docs/#Transport" > Tone.Transport< / a >
2016-04-18 04:14:45 +00:00
is the application-wide timekeeper. It's clock source enables sample-accurate scheduling as well as tempo-curves and automation. This example uses Tone.Sequence to invoke a callback every 16th note.
2015-02-24 17:03:22 +00:00
< / div >
2015-06-27 21:25:01 +00:00
< canvas nx = "matrix" > < / canvas >
< / div >
< script type = "text/javascript" >
2015-02-24 17:03:22 +00:00
//setup a polyphonic sampler
2016-07-07 02:37:04 +00:00
var keys = new Tone.MultiPlayer({
urls : {
"A" : "./audio/casio/A1.mp3",
"C#" : "./audio/casio/Cs2.mp3",
"E" : "./audio/casio/E2.mp3",
"F#" : "./audio/casio/Fs2.mp3",
},
volume : -10,
fadeOut : 0.1,
2015-02-24 17:03:22 +00:00
}).toMaster();
2014-09-04 04:06:01 +00:00
2015-12-05 18:20:53 +00:00
//the notes
var noteNames = ["F#", "E", "C#", "A"];
var loop = new Tone.Sequence(function(time, col){
var column = matrix1.matrix[col];
2015-02-24 17:03:22 +00:00
for (var i = 0; i < 4 ; i + + ) {
if (column[i] === 1){
2016-07-07 02:37:04 +00:00
//slightly randomized velocities
var vel = Math.random() * 0.5 + 0.5;
keys.start(noteNames[i], time, 0, "32n", 0, vel);
2014-09-04 04:06:01 +00:00
}
}
2015-12-05 18:20:53 +00:00
}, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], "16n");
Tone.Transport.start();
2014-06-23 21:00:51 +00:00
2015-02-24 17:03:22 +00:00
< / script >
< script type = "text/javascript" >
2015-06-27 21:25:01 +00:00
nx.onload = function(){
nx.colorize("#f5871f");
matrix1.col = 16;
matrix1.init();
matrix1.resize($("#Content").width(), 250);
matrix1.draw();
}
$(function(){
2014-06-23 21:00:51 +00:00
2015-06-27 21:25:01 +00:00
new Interface.Slider({
name : "BPM",
min : 80,
max : 200,
value : Tone.Transport.bpm.value,
drag : function(val){
Tone.Transport.bpm.value = val;
}
});
new Interface.Button({
text : "Start",
activeText : "Stop",
type : "toggle",
key : 32, //spacebar
start : function(){
2015-12-05 18:20:53 +00:00
loop.start();
2015-06-27 21:25:01 +00:00
},
end : function(){
2015-12-05 18:20:53 +00:00
loop.stop();
2015-06-27 21:25:01 +00:00
},
});
2015-12-05 18:20:53 +00:00
Interface.Loader();
2015-06-27 21:25:01 +00:00
$(window).on("resize", function(){
matrix1.resize($("#Content").width(), 250);
matrix1.draw();
});
});
2014-06-24 16:12:56 +00:00
< / script >
2014-06-23 21:00:51 +00:00
< / body >
< / html >
