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" >
2019-01-09 01:21:29 +00:00
< title > Step Sequencer< / title >
2014-06-23 21:00:51 +00:00
2019-01-09 01:21:29 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" >
< link rel = "icon" type = "image/png" sizes = "174x174" href = "./favicon.png" >
2014-09-06 19:35:31 +00:00
2019-01-09 01:21:29 +00:00
< script src = "https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-bundle.js" > < / script >
2017-03-18 16:35:37 +00:00
< script src = "../build/Tone.js" > < / script >
2019-01-09 01:21:29 +00:00
< script src = "./js/tonejs-ui.js" > < / script >
2015-02-24 17:03:22 +00:00
< style type = "text/css" >
2019-01-09 01:21:29 +00:00
tone-transport {
margin-bottom: 10px;
2015-06-27 21:25:01 +00:00
}
2015-02-24 17:03:22 +00:00
< / style >
2019-01-09 01:21:29 +00:00
< / head >
< body >
< tone-example >
< tone-loader > < / tone-loader >
< tone-explanation label = "Step Sequencer" >
< a href = "https://tonejs.github.io/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.
2019-01-09 01:21:29 +00:00
< / tone-explanation >
< tone-content >
< tone-transport > < / tone-transport >
< tone-step-sequencer > < / tone-step-sequencer >
< / tone-content >
< / tone-example >
< script type = "text/javascript" >
2015-02-24 17:03:22 +00:00
//setup a polyphonic sampler
2017-06-19 19:37:47 +00:00
var keys = new Tone.Players({
"A" : "./audio/casio/A1.[mp3|ogg]",
"C#" : "./audio/casio/Cs2.[mp3|ogg]",
"E" : "./audio/casio/E2.[mp3|ogg]",
"F#" : "./audio/casio/Fs2.[mp3|ogg]",
}, {
"volume" : -10,
"fadeOut" : "64n",
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){
2019-01-09 01:21:29 +00:00
var column = document.querySelector("tone-step-sequencer").currentColumn;
column.forEach(function(val, i){
if (val){
2016-07-07 02:37:04 +00:00
//slightly randomized velocities
var vel = Math.random() * 0.5 + 0.5;
2017-06-19 19:37:47 +00:00
keys.get(noteNames[i]).start(time, 0, "32n", 0, vel);
2014-09-04 04:06:01 +00:00
}
2019-01-09 01:21:29 +00:00
});
2019-12-15 17:22:17 +00:00
//set the column on the correct draw frame
2019-01-09 01:21:29 +00:00
Tone.Draw.schedule(function(){
document.querySelector("tone-step-sequencer").setAttribute("highlight", col);
}, time);
}, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], "16n").start(0);
2015-06-27 21:25:01 +00:00
2019-01-09 01:21:29 +00:00
//bind the interface
document.querySelector("tone-transport").bind(Tone.Transport);
2015-12-05 18:20:53 +00:00
2019-01-09 01:21:29 +00:00
Tone.Transport.on("stop", () => {
setTimeout(() => {
document.querySelector("tone-step-sequencer").setAttribute("highlight", "-1");
}, 100);
2015-06-27 21:25:01 +00:00
});
2017-03-26 20:39:19 +00:00
2014-06-24 16:12:56 +00:00
< / script >
2014-06-23 21:00:51 +00:00
< / body >
2017-03-18 16:35:37 +00:00
< / html >
