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 >
2017-08-27 19:00:38 +00:00
< script src = "../build/Tone.js" > < / script >
2019-01-09 01:21:29 +00:00
< script src = "./js/tonejs-ui.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 >
< tone-example >
< tone-loader > < / tone-loader >
< tone-explanation label = "Channel" >
< a href = "https://tonejs.github.io/docs/PanVol" > 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).
< / tone-explanation >
< tone-content >
< tone-play-toggle > < / tone-play-toggle >
< div id = "tracks" >
< tone-channel label = "Bass" id = "bass" > < / tone-channel >
< tone-channel label = "Chords" id = "chords" > < / tone-channel >
< tone-channel label = "Drone" id = "drone" > < / tone-channel >
< / div >
< / tone-content >
< / tone-example >
< script type = "text/javascript" >
function makeChannel(name){
var channel = new Tone.Channel().toMaster();
var player = new Tone.Player({
url : `./audio/loop/${name}.[mp3|ogg]`,
loop : true
}).sync().start(0);
player.chain(channel);
//bind the UI
document.querySelector(`#${name}`).bind(channel);
}
makeChannel("bass");
makeChannel("chords");
makeChannel("drone");
document.querySelector("tone-play-toggle").bind(Tone.Transport);
2017-08-27 19:00:38 +00:00
< / script >
< / body >
< / html >
