2017-08-27 19:00:38 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > Mixer< / title >
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" >
2017-08-27 19:00:38 +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-08-27 19:00:38 +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 >
2017-08-27 19:00:38 +00:00
< style type = "text/css" >
2019-01-09 01:21:29 +00:00
#tracks {
display: flex;
2017-08-27 19:00:38 +00:00
}
2019-01-09 01:21:29 +00:00
#tracks tone-channel {
flex-grow: 1;
margin: 5px;
width: 20%;
2017-08-27 19:00:38 +00:00
}
< / style >
2019-01-09 01:21:29 +00:00
< / head >
< body >
2020-07-18 00:36:42 +00:00
< tone-example label = "Channel" >
< div slot = "explanation" >
< a href = "https://tonejs.github.io/docs/Channel" > Tone.Channel< / a > provides a simple channel interface. It allows for panning and volume changes as well as the ability to < a href = "https://tonejs.github.io/docs/Solo" > solo< / a > (exclude audio in other Tone.Channels).
< / div >
2019-01-09 01:21:29 +00:00
< tone-loader > < / tone-loader >
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 >
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
function makeChannel(name, url, pan) {
const channel = new Tone.Channel({
pan
}).toDestination();
const player = new Tone.Player({
url: `https://tonejs.github.io/audio/berklee/${url}.mp3`,
loop: true
2019-01-09 01:21:29 +00:00
}).sync().start(0);
2020-07-18 00:36:42 +00:00
player.connect(channel);
2019-01-09 01:21:29 +00:00
2020-07-18 00:36:42 +00:00
// add a UI element
ui({
name,
tone: channel,
parent: document.querySelector("#content")
});
2019-01-09 01:21:29 +00:00
}
2020-07-19 00:20:19 +00:00
2020-07-18 00:36:42 +00:00
// create a meter on the destination node
2020-07-19 00:20:19 +00:00
const toneMeter = new Tone.Meter({ channels: 2 });
Tone.Destination.chain(toneMeter);
2020-07-18 00:36:42 +00:00
meter({
tone: toneMeter,
parent: document.querySelector("#content")
2020-07-19 00:20:19 +00:00
});
2020-07-18 00:36:42 +00:00
makeChannel("Guitar 0", "comping1", 1);
makeChannel("Guitar 1", "comping2", -1);
makeChannel("Guitar 2", "comping3", 0.25);
makeChannel("Guitar 3", "comping4", -0.25);
2019-01-09 01:21:29 +00:00
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());
2017-08-27 19:00:38 +00:00
< / script >
< / body >
< / html >
