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
2019-01-09 01:21:29 +00:00
< script src = "https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-bundle.js" > < / script >
< script src = "../build/Tone.js" > < / script >
< script src = "./js/tonejs-ui.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 >
< tone-example >
< tone-loader > < / tone-loader >
< tone-explanation label = "DAW" >
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.
2019-01-09 01:21:29 +00:00
< / tone-explanation >
2016-09-29 14:34:00 +00:00
2019-01-09 01:21:29 +00:00
< tone-content >
< tone-play-toggle > < / tone-play-toggle >
< div id = "tracks" >
< div id = "progress" > < / div >
< img src = "./audio/loop/drum_loop.png" >
< / div >
< tone-position min = "-1" > < / tone-position >
< / tone-content >
< / tone-example >
2016-09-29 14:34:00 +00:00
2019-01-09 01:21:29 +00:00
< script type = "text/javascript" >
//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
var kick = new Tone.Player({
2017-06-19 19:39:17 +00:00
url : "./audio/loop/kick.[mp3|ogg]",
2016-09-29 14:34:00 +00:00
loop : true
}).toMaster().sync().start(0);
var snare = new Tone.Player({
2017-06-19 19:39:17 +00:00
url : "./audio/loop/snare.[mp3|ogg]",
2016-09-29 14:34:00 +00:00
loop : true
}).toMaster().sync().start("2n");
var hh = new Tone.Player({
2017-06-19 19:39:17 +00:00
url : "./audio/loop/hh.[mp3|ogg]",
2016-09-29 14:34:00 +00:00
loop : true
2016-10-01 22:28:32 +00:00
}).toMaster().sync().start("3:3", "4n"); //start with an offset
2016-09-29 14:34:00 +00:00
2019-01-09 01:21:29 +00:00
//bind the transport
document.querySelector("tone-play-toggle").bind(Tone.Transport);
document.querySelector("tone-position").bind(Tone.Transport);
document.querySelector("tone-position").addEventListener("position", e => {
document.querySelector("#progress").style = `left: ${e.detail*100}%`;
2016-10-01 22:28:32 +00:00
});
2016-09-29 14:34:00 +00:00
< / script >
< / body >
2017-03-18 16:35:37 +00:00
< / html >
