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" >
.Button {
pointer-events: none;
}
.Button.Ready {
pointer-events: initial;
}
< / 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
var buffer = new Tone.Buffer("https://googlechrome.github.io/web-audio-samples/samples/audio/impulse-responses/chorus-feedback.wav");
Tone.loaded().then(function(){
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();
2017-03-26 16:33:28 +00:00
}, 7)
}).then(function(buffer){
//set the buffer once it's rendered
player.buffer = buffer;
button.element.text("Play");
button.element.addClass("Ready");
})
var player = new Tone.Player().toMaster();
// GUI //
var button = Interface.Button({
text : "Play",
activeText : "Stop",
type : "toggle",
start : function(){
player.start();
},
end : function(){
player.stop();
}
});
button.element.text("Rendering...");
< / script >
< / body >
< / html >