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
2019-01-09 01:21:29 +00:00
< script src = "https://unpkg.com/@webcomponents/webcomponentsjs@^2/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:36:42 +00:00
< script src = "../../examples/dist/tone-gui.js" > < / script >
< script src = "../../examples/dist/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-18 00:36:42 +00:00
// create a meter on the destination node
const toneMeter = new Tone.Meter({channels: 2})
Tone.Destination.chain(toneMeter)
meter({
tone: toneMeter,
parent: document.querySelector("#content")
})
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-18 00:36:42 +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 >
