2017-03-26 16:33:28 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > Offline< / 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-03-26 16:33:28 +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 >
2017-03-26 16:33:28 +00:00
< style type = "text/css" >
2019-01-09 01:21:29 +00:00
tone-button {
margin-bottom: 10px;
2017-03-26 16:33:28 +00:00
}
< / style >
< / head >
< body >
2019-01-09 01:21:29 +00:00
< tone-example >
< tone-loader > < / tone-loader >
< tone-explanation label = "Offline Rendering" >
2017-03-26 16:33:28 +00:00
Tone.Offline renders a chunk of Tone.js code into an AudioBuffer. An offline instance of Tone.Transport is passed into the callback which can be used to schedule events. It may take a moment to render the sound.
< br > < br >
2019-06-10 19:43:17 +00:00
< a href = "https://tonejs.github.io/docs/Tone#offline-static" > Tone.Offline< / a > docs.
2019-01-09 01:21:29 +00:00
< / tone-explanation >
2017-03-26 16:33:28 +00:00
2019-01-09 01:21:29 +00:00
< tone-content >
< tone-button label = "Render" > < / tone-button >
< tone-play-toggle disabled > < / tone-play-toggle >
< / tone-content >
< / tone-example >
< script type = "text/javascript" >
2017-03-26 16:33:28 +00:00
//load the buffer for use in the convolver
2018-04-06 23:55:28 +00:00
var buffer = new Tone.Buffer("./audio/IRs/chorus-feedback.wav");
2017-03-26 16:33:28 +00:00
2018-04-06 23:55:28 +00:00
function generateAudioOffline(){
2017-03-26 20:38:00 +00:00
return Tone.Offline(function(Transport){
2017-03-26 16:33:28 +00:00
var reverb = new Tone.Convolver(buffer).toMaster();
reverb.wet.value = 0.2;
2017-03-26 20:38:00 +00:00
var pannerA = new Tone.Panner(-1).connect(reverb);
var synthA = new Tone.Synth({
"envelope" : {
"attack" : 0.01,
"decay" : 5,
"sustain" : 0
},
"oscillator" : {
"type" : "sawtooth4"
}
}).connect(pannerA);
var seqA = new Tone.Sequence(function(time, note){
2019-01-09 01:21:29 +00:00
synthA.triggerAttack(note, time);
2017-03-26 20:38:00 +00:00
}, ["A4", "G4", "G#4", "F#4", "E4"], "8n").start(0);
seqA.loop = false;
var pannerB = new Tone.Panner(1).connect(reverb);
var synthB = new Tone.Synth({
"envelope" : {
"attack" : 0.001,
"decay" : 3,
"sustain" : 0
},
"oscillator" : {
"type" : "square8"
}
}).connect(pannerB);
var seqB = new Tone.Sequence(function(time, note){
2019-01-09 01:21:29 +00:00
synthB.triggerAttack(note, time);
2017-03-26 20:38:00 +00:00
}, ["G#4", "A4", "G4", "F4", "C4"], "8n").start("16n");
seqB.loop = false;
var bass = new Tone.MonoSynth({
"envelope" : {
"attack" : 0.01,
"decay" : 3,
"sustain" : 0.1
},
2019-01-09 01:21:29 +00:00
}).toMaster();
2017-03-26 20:38:00 +00:00
var bassSeq = new Tone.Sequence(function(time, note){
2019-01-09 01:21:29 +00:00
bass.triggerAttackRelease(note, "1n", time);
2017-03-26 20:38:00 +00:00
}, ["C2", "C2", "F1", "F1"], "4n").start(0);
bassSeq.loop = false;
Transport.bpm.value = 150;
Transport.start();
2019-01-09 01:21:29 +00:00
}, 7);
2018-04-06 23:55:28 +00:00
}
2017-03-26 16:33:28 +00:00
2019-01-09 01:21:29 +00:00
//play the buffer with a Tone.Player when it's been generated
2017-03-26 16:33:28 +00:00
var player = new Tone.Player().toMaster();
2019-01-09 01:21:29 +00:00
//bind the interface
document.querySelector("tone-button").addEventListener("click", e => {
e.target.setAttribute("label", "Rendering...");
e.target.setAttribute("disabled", "");
var buffer = generateAudioOffline().then(buffer => {
document.querySelector("tone-button").setAttribute("label", "Rendered");
player.buffer = buffer;
document.querySelector("tone-play-toggle").removeAttribute("disabled");
});
2018-04-06 23:55:28 +00:00
});
2019-01-09 01:21:29 +00:00
document.querySelector("tone-play-toggle").bind(player);
2017-03-26 16:33:28 +00:00
< / script >
< / body >
2019-06-10 19:43:17 +00:00
< / html >
