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
2020-07-18 00:58:09 +00:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js" > < / script >
2020-07-18 00:36:42 +00:00
< link href = "https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel = "stylesheet" / >
2017-03-18 16:35:37 +00:00
< script src = "../build/Tone.js" > < / script >
2020-07-18 00:58:09 +00:00
< script src = "./js/tone-ui.js" > < / script >
< script src = "./js/components.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 >
2020-07-18 00:36:42 +00:00
< tone-example label = "Step Sequencer" >
2019-01-09 01:21:29 +00:00
< tone-loader > < / tone-loader >
2020-07-18 00:36:42 +00:00
< div slot = "explanation" >
2019-01-09 01:21:29 +00:00
< 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.
2020-07-18 00:36:42 +00:00
< / div >
2019-01-09 01:21:29 +00:00
2020-07-18 00:36:42 +00:00
< div id = "content" >
< tone-play-toggle > < / tone-play-toggle >
< tone-slider label = "tempo" units = "bpm" min = "60" max = "240" value = "120" > < / tone-slider >
2019-01-09 01:21:29 +00:00
< tone-step-sequencer > < / tone-step-sequencer >
2020-07-18 00:36:42 +00:00
< / div >
2019-01-09 01:21:29 +00:00
< / tone-example >
< script type = "text/javascript" >
2020-07-18 00:36:42 +00:00
const keys = new Tone.Players({
urls: {
0: "A1.mp3",
1: "Cs2.mp3",
2: "E2.mp3",
3: "Fs2.mp3",
},
fadeOut: "64n",
baseUrl: "https://tonejs.github.io/audio/casio/"
}).toDestination();
2020-07-19 00:20:19 +00:00
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
document.querySelector("tone-slider").addEventListener("input", (e) => Tone.Transport.bpm.value = parseFloat(e.target.value));
document.querySelector("tone-step-sequencer").addEventListener("trigger", ({ detail }) => {
keys.player(detail.row).start(detail.time, 0, "16t");
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 >
