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
2020-07-18 00:58:09 +00:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/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" / >
2019-01-09 01:21:29 +00:00
< script src = "../build/Tone.js" > < / script >
2020-07-18 00:58:09 +00:00
< script src = "./js/tone-ui.js" > < / script >
< script src = "./js/components.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 >
2020-07-18 00:36:42 +00:00
< tone-example label = "Offline Rendering" >
2019-01-09 01:21:29 +00:00
< tone-loader > < / tone-loader >
2020-07-18 00:36:42 +00:00
< div slot = "explanation" >
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.
2020-07-18 00:36:42 +00:00
< / div >
2017-03-26 16:33:28 +00:00
2020-07-18 00:36:42 +00:00
< div id = "content" >
2019-01-09 01:21:29 +00:00
< tone-play-toggle disabled > < / 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
// play the buffer with a Tone.Player when it's been generated
const player = new Tone.Player().toDestination();
2017-03-26 16:33:28 +00:00
2020-07-18 00:36:42 +00:00
const renderingPromise = Tone.Offline(({ transport }) => {
2017-03-26 16:33:28 +00:00
2020-07-18 00:36:42 +00:00
const reverb = new Tone.Reverb().toDestination();
2017-03-26 16:33:28 +00:00
2020-07-18 00:36:42 +00:00
const pannerA = new Tone.Panner(-1).connect(reverb);
const synthA = new Tone.Synth({
envelope: {
attack: 0.01,
decay: 5,
sustain: 0
},
oscillator: {
type: "sawtooth4"
}
}).connect(pannerA);
const seqA = new Tone.Sequence(((time, note) => {
synthA.triggerAttack(note, time);
}), ["A4", "G4", "G#4", "F#4", "E4"], "8n").start(0);
seqA.loop = false;
2017-03-26 20:38:00 +00:00
2020-07-18 00:36:42 +00:00
const pannerB = new Tone.Panner(1).connect(reverb);
const synthB = new Tone.Synth({
envelope: {
attack: 0.001,
decay: 3,
sustain: 0
},
oscillator: {
type: "square8"
}
}).connect(pannerB);
const seqB = new Tone.Sequence(((time, note) => {
synthB.triggerAttack(note, time);
}), ["G#4", "A4", "G4", "F4", "C4"], "8n").start("16n");
seqB.loop = false;
2017-03-26 20:38:00 +00:00
2020-07-18 00:36:42 +00:00
const bass = new Tone.MonoSynth({
envelope: {
attack: 0.01,
decay: 3,
sustain: 0.1
},
}).toDestination();
const bassSeq = new Tone.Sequence(((time, note) => {
bass.triggerAttackRelease(note, "1n", time);
}), ["C2", "C2", "F1", "F1"], "4n").start(0);
bassSeq.loop = false;
2017-03-26 20:38:00 +00:00
2020-07-18 00:36:42 +00:00
transport.bpm.value = 150;
transport.start();
// return a promise
return reverb.ready;
}, 7);
2017-03-26 16:33:28 +00:00
2020-07-18 00:36:42 +00:00
// set the buffer when it's done
renderingPromise.then(buffer => player.buffer = buffer);
2020-07-19 00:20:19 +00:00
renderingPromise.then(() => document.querySelector("tone-play-toggle").disabled = false);
2017-03-26 16:33:28 +00:00
2020-07-19 00:20:19 +00:00
document.querySelector("tone-play-toggle").addEventListener("start", () => player.start());
document.querySelector("tone-play-toggle").addEventListener("stop", () => player.stop());
2017-03-26 16:33:28 +00:00
< / script >
< / body >
2019-06-10 19:43:17 +00:00
< / html >
