2017-03-26 16:33:28 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > Offline< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" >
< link rel = "icon" type = "image/png" sizes = "174x174" href = "./style/favicon.png" >
< script src = "../build/Tone.js" > < / script >
< script src = "./scripts/jquery.min.js" > < / script >
< script src = "./scripts/draggabilly.js" > < / script >
< script src = "./scripts/StartAudioContext.js" > < / script >
< script src = "./scripts/Interface.js" > < / script >
< script src = "https://tonejs.github.io/Logo/build/Logo.js" > < / script >
< link rel = "stylesheet" type = "text/css" href = "./style/examples.css" >
< script >
// jshint ignore: start
< / script >
< style type = "text/css" >
2018-04-06 23:55:28 +00:00
.Button:not(.Visible) {
display: none;
2017-03-26 16:33:28 +00:00
}
< / style >
< / head >
< body >
< div id = "Content" >
< div id = "Title" > Offline< / div >
< div id = "Explanation" >
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 >
2017-05-01 19:54:36 +00:00
< a href = "https://tonejs.github.io/docs/#Tone.Offline" > Tone.Offline< / a > docs.
2017-03-26 16:33:28 +00:00
< / div >
< / div >
< script >
//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
Interface.Loader();
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){
synthA.triggerAttack(note, time)
}, ["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){
synthB.triggerAttack(note, time)
}, ["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
},
}).toMaster()
var bassSeq = new Tone.Sequence(function(time, note){
bass.triggerAttackRelease(note, "1n", time)
}, ["C2", "C2", "F1", "F1"], "4n").start(0);
bassSeq.loop = false;
Transport.bpm.value = 150;
Transport.start();
2018-04-06 23:55:28 +00:00
}, 7).then(function(buffer){
//set the buffer once it's rendered
player.buffer = buffer;
});
}
2017-03-26 16:33:28 +00:00
var player = new Tone.Player().toMaster();
// GUI //
2018-04-06 23:55:28 +00:00
var playButton = Interface.Button({
2017-03-26 16:33:28 +00:00
text : "Play",
activeText : "Stop",
type : "toggle",
start : function(){
player.start();
},
end : function(){
player.stop();
}
});
2018-04-06 23:55:28 +00:00
//the render button
var renderButton = Interface.Button({
text : "Render",
start : function(){
renderButton.element.text("Rendering...");
generateAudioOffline().then(function(){
renderButton.element.remove();
playButton.element.addClass("Visible");
});
}
});
renderButton.element.addClass("Visible");
2017-03-26 16:33:28 +00:00
< / script >
< / body >
< / html >
