2016-09-29 14:34:00 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
2019-01-09 01:21:29 +00:00
< title > DAW< / title >
2016-09-29 14:34:00 +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" >
2016-09-29 14:34:00 +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" / >
2019-01-09 01:21:29 +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 >
2016-09-29 14:34:00 +00:00
< style type = "text/css" >
2019-01-09 01:21:29 +00:00
tone-play-toggle {
margin-bottom: 10px;
2016-09-29 14:34:00 +00:00
}
2019-01-09 01:21:29 +00:00
#tracks {
2016-09-29 14:34:00 +00:00
position: relative;
2019-01-09 01:21:29 +00:00
width: calc(100% - 10px);
margin-left: 10px;
2016-09-29 14:34:00 +00:00
}
2019-01-09 01:21:29 +00:00
#progress {
width: 1px;
2016-09-29 14:34:00 +00:00
height: 100%;
left: 0%;
2019-01-09 01:21:29 +00:00
position: absolute;
2016-09-29 14:34:00 +00:00
background-color: black;
}
2019-01-09 01:21:29 +00:00
img {
2016-10-01 22:28:32 +00:00
width: 100%;
2019-01-09 01:21:29 +00:00
height: 200px;
2016-10-01 22:28:32 +00:00
}
2016-09-29 14:34:00 +00:00
< / style >
2019-01-09 01:21:29 +00:00
< / head >
< body >
2020-07-18 00:36:42 +00:00
< tone-example label = "DAW" >
2019-01-09 01:21:29 +00:00
< tone-loader > < / tone-loader >
2020-07-18 00:36:42 +00:00
< div slot = "explanation" >
2016-10-01 22:30:53 +00:00
This beat is composed of 3 independent Players each with a different loop length, synced to the Transport to start at different times and different offsets. The players stay synchronized to the position and offset of the Transport.
2020-07-18 00:36:42 +00:00
< / div >
2016-09-29 14:34:00 +00:00
2020-07-18 00:36:42 +00:00
< div id = "content" >
2019-01-09 01:21:29 +00:00
< tone-play-toggle > < / tone-play-toggle >
< div id = "tracks" >
< div id = "progress" > < / div >
2020-07-19 20:14:30 +00:00
< img src = "https://tonejs.github.io/audio/loop/drum_loop.png" >
2019-01-09 01:21:29 +00:00
< / div >
2020-07-18 00:36:42 +00:00
< / div >
2019-01-09 01:21:29 +00:00
< / tone-example >
2016-09-29 14:34:00 +00:00
2019-01-09 01:21:29 +00:00
< script type = "text/javascript" >
2020-07-19 00:20:19 +00:00
// set the transport
2016-10-01 22:28:32 +00:00
Tone.Transport.bpm.value = 108;
2019-01-09 01:21:29 +00:00
Tone.Transport.loop = true;
Tone.Transport.loopStart = "4m";
Tone.Transport.loopEnd = "8m";
2016-09-29 14:34:00 +00:00
2020-07-19 00:20:19 +00:00
const kick = new Tone.Player({
2020-07-19 20:14:30 +00:00
url: "https://tonejs.github.io/audio/loop/kick.mp3",
2020-07-19 00:20:19 +00:00
loop: true
2020-07-18 00:36:42 +00:00
}).toDestination().sync().start(0);
2016-09-29 14:34:00 +00:00
2020-07-19 00:20:19 +00:00
const snare = new Tone.Player({
2020-07-19 20:14:30 +00:00
url: "https://tonejs.github.io/audio/loop/snare.mp3",
2020-07-19 00:20:19 +00:00
loop: true
2020-07-18 00:36:42 +00:00
}).toDestination().sync().start("2n");
2016-09-29 14:34:00 +00:00
2020-07-19 00:20:19 +00:00
const hh = new Tone.Player({
2020-07-19 20:14:30 +00:00
url: "./audio/loop/hh.mp3",
2020-07-19 00:20:19 +00:00
loop: true
}).toDestination().sync().start("3:3", "4n"); // start with an offset
2016-09-29 14:34:00 +00:00
2020-07-18 00:36:42 +00:00
// connect the UI with the components
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
// keep the playhead on track
setInterval(() => {
// scale it between 0-1
2020-07-19 00:20:19 +00:00
const progress = (Tone.Transport.progress + 1) / 2;
2020-07-18 00:36:42 +00:00
document.querySelector("#progress").style = `left: ${progress*100}%`;
2020-07-19 00:20:19 +00:00
}, 16);
2016-09-29 14:34:00 +00:00
< / script >
< / body >
2017-03-18 16:35:37 +00:00
< / html >
